H5属性的操作

属性的操作

预定义属性

<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>

输出结果

自定义属性

<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案例：

<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>

0 条评论