h5中classList属性及自定义dataset属性的使用
【摘要】 本文主要介绍了h5中classList属性的增加，移除及增加或移除类的方法以及自定义dataset属性的使用方法
一、h5的classList属性的使用
<body>
<div id='div1' class="cl1 cl2 cl3" >my name is zhang</div>
</body>
<script>
var oDiv1=document.querySelector("#div1");
oDiv1.classList.add('cl4');
oDiv1.classList.remove('cl1');
oDiv1.classList.toggle('cl2');
oDiv1.classList.toggle('cl5');
oDiv1.innerHTML=oDiv1.dataset.zjkTianxiuLzf;
console.log(oDiv1.classList);
</script>
1、增加类方法
oDiv1.classList.add(“cl4”)
2、移除类方法
oDiv1.classList.remove(“cl1”);
3、增加或移除类方法
如div中的类有cl2，则
oNode.toggle(“cl2”)会将cl2移除；
如div中的类没有cl5，则
oNode.toggle(“cl5”)会增加cl5
二、h5中的自定义属性dataset的使用
我们可以给HTML添加自定义data-*属性。需要注意以下规则：
在html定义时用短横线方式命名，一定要以data打头，
在js里使用data-*属性时，要用dataset属性获取并且把data取掉，且将后边以短横线打头的名称转变为驼峰式命名。
设置dataset集中自定义属性用赋值号“=”即可。
<body>
<div id='div1' data-zjk-tianbao-jmy="张家口天秀花园江明月">XXX</div>
</body>
<script>
var oDiv1=document.querySelector("#div1");
var dataValue=oDiv1.dataset.zjkTianbaoJmy;
console.log(oDiv1.dataset);
oDiv1.dataset.zjkTianbaoJmy="张家口天宝花园江敏岳";
dataValue=oDiv1.dataset.zjkTianbaoJmy;
console.log(oDiv1.dataset) ;
</script>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）