JavaScript给元素添加多个class的简单实现

时间:2022-09-15 19:41:13 作者:快盘下载人气:

当div 中的class 有多个classname时，它会同时应用这几个class定义的CSS样式，那么应用时的优先级是怎么样的？

如果有多个样式的话，会采取覆盖的形式执行。就是如果有定义同一个属性比如background，后面定义的background属性会覆盖前面的background属性，下面是用JavaScript给元素添加多个class的简单实现的一个例子。

<html>
　　
<head>
　　　　
<style type="text/css">
　　　　　　.div2{
　　　　　　font-size:16px;　
　　　　　　color:orange;
　　　　　　}
　　　　　　.div3{
　　　　　　font-size:20px;
　　　　　　color:blue;
　　　　　　}
　　　　
<style>
　　　　
<script type="text/javascript">
　　　　　　[1]直接把样式赋值给className
　　　　　　var odiv=document.getElementById('div1');
　　　　　　odiv.className= div3
　　　　　　//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;
　　　　　　[2]使用累加赋值给className
　　　　　　var odiv=document.getElementById('div1');
　　　　　　odiv.className+=" "+div3  　　//样式和样式之间需要空隙 ，所以加个空字符串隔开
　　　　　　//这样可以得到 class="div2 div3" 可以正常增加，但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式，如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";
　　　　　　[3]检测样式原先之前是否有相同的样式
　　　　　　var odiv=document.getElementById('div1');　
　　　　　　function hasClass(element,csName){
　　　　　　　　element.className.match(RegExp('(s|^)'+csName+'(s|$)')); //使用正则检测是否有相同的样式
　　　　}　　
　　　　　　[4]在[3]的基础上我们就可以进行判断性给元素添加样式了　　　　　
　　　　　　var odiv=document.getElementById('div1');　
　　　　　　function hasClass(element,csName){
　　　　　　　return 　element.className.match(RegExp('(s|^)'+csName+'(s|$)')); //使用正则检测是否有相同的样式
　　　　}　
　　　　　　function addClass(element,csName){
　　　　　　　if(!hasClass(element,csName)){
　　　　　　　　　element.className+=' '+csName;
　　　　　　}
　　　　addClass(odiv,'div3');
　　　　//这样就可以灵活给元素添加样式了;
　　　　【元素删除指定样式】
　　//同样先进行判断，在进行删除
　　
　　　　　var odiv=document.getElementById('div1');　
　　　　　function hasClass(element,csName){
　　　　　　　return 　element.className.match(RegExp('(s|^)'+csName+'(s|$)')); //使用正则检测是否有相同的样式
　　　　}　
　　　　　function deleteClass(element,csName){
　　　　　　　if(!hasClass(element,csName)){
　　　　　　　　　element.className.replace(RegExp('(s|^)'+csName+'(s|$)'),' ');  //利用正则捕获到要删除的样式的名称，然后把他替换成一个空白字符串，就相当于删除了
　　　　　}
　deleteClass(odiv,div3);
　　}
</script>
　　
</head>
　　
<body>
　　　　
<div id="div1" class='div2'>
   测试
</div>
　　
</body>
</html>

文章来源：

javaScript给元素添加多个class的简单实现

https://www.jb51.net/article/88901.htm

加载全部内容