class的二般用法

一般来说,class就是给一堆元素添加样式的,但是还有二般的用法,就是用来作为一个开关,来切换他的子孙元素的样式。举个例子:

<ul>
<li><span>1</span>:<span>one</span></li>
<li><span>2</span>:<span>two</span></li>
<li><span>3</span>:<span>three</span></li>
<li><span>4</span>:<span>four</span></li>
</ul>
<button>红色</button>

这里有四个li元素和一个button元素,现在当点击button时,使每一个li元素里面的第二个span元素的字体变成红色。

这时候就可以通过切换父元素的class来改变一群子元素的样式,css:

ul{
list-style-type:none;
}
.red{ }
.red li>span:last-child{
color:red;
}

这里,.red本身没有样式,作用在于当父元素有red class时,子元素的颜色就会发生变化,起到开关的作用。

btn.onclick=function(){
if(document.querySelector("ul").classList.contains('red'))
document.querySelector("ul").classList.remove('red');
else{
document.querySelector("ul").classList.add('red');
}
}

这里看效果:class控制后代元素

上一篇:C# 知识特性 Attribute,XMLSerialize,


下一篇:Java网络编程(TCP服务端)