js 取html自定义属性,JS操作html中的自定义属性
web.jpeg
自定义属性
程序开发中由开发者自己定义的属性
那么怎么添加自定义属性呢?怎么作用在标签上呢? JS提供设置和获取
自定义属性的方法
自定义属性的设置和获取
设置自定义属性:setAttribute("属性的名字","属性的值");
获取自定义属性的值:getAttribute("属性的名字")
- 人事部门
- IT部门
- 客服部门
- 产品部门
- 运维部门
//自定义属性:开发者自己添加的属性
//总结:设置自定义属性:setAttribute("属性的名字","属性的值");
//获取自定义属性的值:getAttribute("属性的名字")
var oul = document.getElementById("oul");
var lists = oul.getElementsByTagName("li");
for(var i = 0; i < lists.length; i ++){
//设置属性
lists[i].setAttribute("num", i + 1);
//获取属性值
lists[i].onclick = function(){
alert( this.getAttribute("num"));
}
console.log(lists[I]);
}
image.png
自定义属性的移除
removeAttribute("属性的名称"); 这个不仅可以移除自定义的属性,还可以移除系统的属性,比如移除class属性
小例子
体育
生活
军事
娱乐
- 这是体育频道
- 这是生活频道
- 这是军事
- 这是娱乐
//获取 btn元素对象
var btns = document.getElementById("btns");
var spans = btns.getElementsByTagName("span");
//获取li
var hd = document.getElementById("bd");
var lists = hd.getElementsByTagName("li");
console.log( lists);
//循环遍历
for(var i = 0; i < spans.length; i ++){
//给dom对象添加属性index
spans[i].setAttribute("index",i);
spans[i].onclick = function(){
console.log( this.getAttribute("index"));
//排他思想
for(var j = 0; j < spans.length; j ++){
//移除类样式
spans[j].removeAttribute("class");
lists[j].removeAttribute("class");
}
//获取属性
var num = this.getAttribute("index");
this.className = "current";
lists[num].className = "show";
}
}
例子.gif
上面的例子中我们,给标签设置了定义属性,如果我们安卓 下面的设置 属性,我们只是给 获取的DOM对象设置属性,没有作用在标签上,JS 是一门动态语言,就像我们在JS对象认知中提到的一样,可以给任意对象 动态的添加属性
image.png
image.png
给标签添加自定义属性
data-* 其中*是任意字符,如果*里面包含-会转化成驼峰命名法的字符串
//定义一个自定义属性
获取 dataset 是一个DOMStringMap对象
let oDiv = document.querySelector("div");
console.log(oDiv.dataset);
console.log(oDiv.dataset);
// 打印结果是:TT
image.png
js 取html自定义属性,JS操作html中的自定义属性相关推荐
- jQuery操作iframe中js函数的方法小结
1.jquery操作iframe中的元素(2种方式) ? 1 2 var tha = $(window.frames["core_content"].document).find( ...
- html5 js选择器,使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 2 3 4 5 使用HTML5的JS选择器操作页面中的元素 6 7 8 9 10 兴趣爱好: 11 12 ...
- PHP中的__toString方法(实现JS里的链式操作)
_toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...
- thymeleaf 获取yml中的值_Thymeleaf前后端传值 页面取值与js取值
目的: 后端通过Model传值到前端 页面通过Model取值显示 js通过Model取值作为变量使用 1.后台Controller @GetMapping("/message") ...
- 【JS笔记】JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录 一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...
- js向ul中写html语言,javascript操作ul中li的方法
本文实例讲述了javascript操作ul中li的方法.分享给大家供大家参考.具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra ...
- js 拉勾网效果_Node.js 中实践基于 Redis 的分布式锁实现
在一些分布式环境下.多线程并发编程中,如果对同一资源进行读写操作,避免不了的一个就是资源竞争问题,通过引入分布式锁这一概念,可以解决数据一致性问题. 作者简介:五月君,Nodejs Developer ...
- js系列教程1-数组操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- 原生js获取document_【JS 口袋书】第 9 章:使用 JS 操作 HTML 元素
作者:valentinogagliardi 译者:前端小智 来源:github 这几天自己的公众号无套路送现金 200+,参与方式如下 OKR 与 KPI 的区别(文中无套路送现金 200+) 文档对 ...
最新文章
- 空类,虚函数类,虚继承类的空间大小
- javascript php 区别,PHP 或者 JavaScript 这些弱类型 的|| 和 | 的区别, 附代码;
- Linux gsoap 访问Jira
- Linux的磁盘管理
- [蓝桥杯][算法训练VIP]接水问题(思维)
- mysql的引双向链表_一分钟掌握MySQL的InnoDB引擎B+树索引
- ubuntu MySQL的卸载
- WEB安全基础 - - -漏洞扫描器
- P问题、NP问题和NPC问题
- 档案管理学 | 档案实体管理概论
- python上台阶问题_“上台阶问题”的分析
- vue 背景透明度_vue添加星空背景特效
- 痛失阵地,又一家热门BT种子观影网站关停
- libsvm 2.6 的代码注释(支持向量机的神作)
- MGCtoken与IMtoken哪个好?安全吗?
- 基础连接已经关闭: 接收时发生意外错误
- opkg linux 2.6内核,新年大礼!基于linux最新内核2.6.37编译的Openwrt for MR3420 841n 941n 741N 825b1...
- react学习笔记(完整版 7万字超详细)
- 全球最美Top100女神出炉,国内六人上榜,我Python发现了这些秘密...
- buuctf还原大师解题思路
热门文章
- 记一次“Shiro+任务调度”开发过程中出现UnavailableSecurityManagerException解决思路
- angular4点击事件监听_JavaScript从零开始——DOM事件编程(1)
- django shortcut函数
- 树的常见概念,二叉树的性质
- 表格数字乘以百分比怎么算_Excel输入多位数字之后有了“E”,用文本格式一步到位,恢复原状...
- 史上最全ClassLoader总结
- IDEA如何删除无用war包
- ubuntu安装 rust nightly_一起学Rust编程「1」:开发环境
- 怎么用nuget程序包管理器安装jquery_Nuget服务器
- PreparedStatement批量执行sql