您的位置：首页 > Web前端 > JavaScript

js 动态添加多个class

2017-08-16 13:50 169 查看
<!-- <!DOCTYPE HTML> 

<HTML> 

<HEAD> 

<meta charset="utf-8" /> 

<title>setAttribute('class', 'abc')</title> 

<style type="text/css"> 

.ddddd { 

background: black; 

} 

.abc { 

background: red; 

} 

</style> 

</HEAD> 

<BODY> 

<div id="d1" class="ddddd">test div</div> 

<script> 

var div = document.getElementById('d1'); 

// div.setAttribute("class", "abc"); 

div.className+=" "+'abc'  

</script> 

</BODY> 

</HTML>  -->

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航