H5属性的操作
2018-05-27 本文已影响12人
强某某
属性的操作
预定义属性
h5提供了classList属性获取class的属性值，没有这个api之前，需要一点点获取attribute属性然后通过复杂匹配获取。
<body>
<div id='test' class="zq zq1 zq2"></div>
</body>
</html>
<script>
var test=document.querySelector("#test");
console.log(test.classList)
test.classList.add('zq3');
console.log(test.classList);
test.classList.remove('zq');
console.log(test.classList);
test.classList.toggle('zq');//如果存在就删除，不存在就添加
</script>
输出结果
图一.png
自定义属性
h5之前，都是通过setattribute操作自定义属性
<body>
<div id='test'name='info'></div>
</body>
</html>
<script>
var test=document.querySelector("#test");
test.setAttribute('name','info1');
var h=test.getAttribute('name');
console.log(h);//info1
</script>
H5案例：
如果是data-开头的自定义属性，可以通过
<body>
<div id='test' data-name='info' data-type-info='hehe'></div>
</body>
</html>
<script>
var test=document.querySelector("#test");
console.log(test.dataset.name);//info
// data-type-info：获取data-开头的属性名的属性值，
//后面的-的首字母大写
console.log(test.dataset.typeInfo);//hehe
</script>
H5可编辑属性
<body>
<div id='test' contenteditable="true">可编辑属性</div>
</body>
可编辑属性.png
