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>
var allLis = document.querySelectorAll('li');
/
*获取元素所有class类，以数组型式展⽰*/
console.log(allLis[4].classList);
/*add：为元素添加指定名称的样式：⼀次只能添加⼀个样式*/
allLis[0].onclick=function(){
this.classList.add('red')
};
/*remove：为元素移除指定名称的样式（不是移除class属性，⼀次也只能移除⼀个）*/cssclass属性
allLis[1].onclick=function(){
ve('blue')
};
/*toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加，反之删除*/
allLis[2].onclick=function(){
le('yellow')
};
/*orange：判断元素是否包含指定名称的样式，返回true/false*/
allLis[3].onclick=function(){
console.log(ains('orange'));
};
/*replace：传⼊两个类名，第⼆个类名替换第⼀个*/
allLis[4].onclick=function(){
console.log(place('red','change'));
}
}
⾃定义属性
<!--定义-->
<!--规范：
1.data-开头
2.data-后必须⾄少有⼀个字符
3.data-后多个单词使⽤ - 连接
建议：
1.名称应该都使⽤⼩写，不要包含任何⼤写字符
2.名称中不要有任何特殊符号
3.名称中不要副作⽤纯数字-->
<p data-my-world="say">hello world</p>
/*取值*/
var p = document.querySelector('p');
/*获取⾃定义属性值
* 将data-后⾯的单词使⽤camel命名法连接*/ var say = p.dataset['myWorld'];
console.log(say);// say
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。