javaScript给元素添加多个class

时间 2019-11-30

标签 javascript 元素添加多个 class 栏目 JavaScript 繁體版

原文原文链接

<html>javascript

　　<head>css

　　　　<style type="text/css">html

　　　　　　.div2{java

　　　　　　font-size:16px;　测试

　　　　　　color:orange;htm

　　　　　　}ip

　　　　　　.div3{element

　　　　　　font-size:20px;字符串

　　　　　　color:blue;get

　　　　　　}

　　　　<style>

　　　　　　[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>

　　</body>

</html>