css3——操作元素类样式（classList）、自定义属性（dataset）

操作元素类样式

首先自己创建五个class名（orange,red,yellow,blue,change），样式自定义

<ul>
    <li>1</li>
    <li class="blue">2</li>
    <li>3</li>
    <li class="orange">4</li>
    <li class="orange red yellow blue">5</li>
</ul>

window.onload = function () {
        var allLis = document.querySelectorAll('li');

        /*获取元素所有class类，以数组型式展示*/
        console.log(allLis[4].classList);

        /*add：为元素添加指定名称的样式：一次只能添加一个样式*/
        allLis[0].onclick = function () {
            this.classList.add('red')
        };

        /*remove：为元素移除指定名称的样式（不是移除class属性，一次也只能移除一个）*/
        allLis[1].onclick = function () {
            this.classList.remove('blue')
        };

        /*toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加，反之删除*/
        allLis[2].onclick = function () {
            this.classList.toggle('yellow')
        };

        /*orange：判断元素是否包含指定名称的样式，返回true/false*/
        allLis[3].onclick = function () {
            console.log(this.classList.contains('orange'));
        };

        /*replace：传入两个类名，第二个类名替换第一个*/
        allLis[4].onclick = function () {
            console.log(this.classList.replace('red','change'));
        }
    }

自定义属性

<!--定义-->
<!--规范：
1.data-开头
2.data-后必须至少有一个字符
3.data-后多个单词使用 - 连接
建议：
1.名称应该都使用小写，不要包含任何大写字符
2.名称中不要有任何特殊符号
3.名称中不要副作用纯数字-->
<p data-my-world="say">hello world！！！</p>

/*取值*/
window.onload = function () {
        var p = document.querySelector('p');
        /*获取自定义属性值
        * 将data-后面的单词使用camel命名法连接*/
        var say = p.dataset['myWorld'];
        console.log(say);// say
    }