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

时间：2021-05-26

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的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章