从零开始前端学习[51]:js中去操作css样式以及css属性的替代方法

来源：互联网发布：淘宝发布的宝贝不见了编辑：程序博客网时间：2024/06/06 08:50

js中去操作css样式以及css属性的替代方法

复杂形式的改变样式
使用类定义的方式+className的形式
使用setAttribute的形式加载
使用cssText的形式进行拼接

提示:
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

复杂形式的改变样式

什么叫最原始的方式去改变样式，就是通过对象对每个单独的属性去改变的这样的一种方式，这种方式有个及其恶略的缺点，就是代码量很大，因为每个属性都需要单独去设置。如下所示:

var p_1 = document.getElementById("p_1"); p_1.onmouseenter = function () {        p_1.style.color = "white";        p_1.style.backgroundColor = "deeppink";        p_1.style.fontSize = "18px";    }    p_1.onmouseleave = function () {        p_1.style.color = "black";        p_1.style.backgroundColor = "white";        p_1.style.fontSize = "16px";    }

它在样式的设置上面相对来说是比较复杂的。

使用类定义的方式+className的形式

什么叫做类定义，就是提前先去定义一个类名，然后通过动态改变类加载的形式，去改变其样式，它有两种形式，一种是拼接形式，另外一种就是覆盖形式：
首先先去定义一个样式:

 .onenter{background: greenyellow;color: #3a8abf;font-size: 20px}

然后通过className去动态去修改:

   p_2.onmouseenter = function () {        p_2. = "onenter";   }   p_2.onmouseleave = function () {       p_2.className  = "";   }

拼接形式:

  p_3.onmouseenter = function () {    var name = p_2.className;    name+=" ";    name+=" onenter"    p_3.setAttribute("class",name);}p_3.onmouseleave = function () {   p_3.setAttribute("class","fl_l");}

注意拼接形式的话，在后续释放的时候，同样要将拼接的class类给去掉

使用setAttribute的形式加载

setAttrbute故名思议，也就是给添加一个特性特征，同样可以用来做css样式的动态切换,
如下所示,效果与上述className的形式是一样的:

p_3.onmouseenter = function () {    var name = p_2.className;    name+=" ";    name+=" onenter"    p_3.setAttribute("class",name);}p_3.onmouseleave = function () {   p_3.setAttribute("class","fl_l");}

使用cssText的形式进行拼接

cssText在本质上面与className的形式是一致的，就是动态的去给其设置一个css的样式，但是这个样式并不会去改变其class的类型而已，它也是分成两种形态，一种是动态的去覆盖，一种是动态的去追加

对于样式来说，最简单的写法就是：

1.box.style.width = '150px';2.box.style.height = '150px';3.box.style.background = '#cc00ff';

但是对于上述的这种写法太冗余了，可以简化成，:

1.box.style.cssText = "width:150px; height:150px; background:#c0f;"

但是上面的写法是覆盖的写法，这种会把其原有的css样式给覆盖掉，所以更多的是采用追加形式。

1.oBox.style.cssText = oBox.style.cssText + 'width:150px; height:150px; background:#c0f;';2：1.oBox.style.cssText += 'width:150px; height:150px; background:#c0f;';

追加的形式可能相对会更好一点，保留了原有的样式形式。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        .clearfix:after{          clear: both;          content: "";          display: block;        }        .fl_l{          float: left;        }        .main{width:1200px;box-shadow: 0 0 5px 0 deeppink;margin: 30px auto;}        p{width: 120px;height: 120px;box-shadow: 0 0 5px 0 blue;margin: 10px}        .onenter{background: greenyellow;color: #3a8abf;font-size: 20px}        .p_style{color: red;font-size: 22px}  </style></head><body>  <div class="main clearfix">    <p   class="fl_l" id="p_1">最愚蠢的方式</p>    <p  class="fl_l" id="p_2">定义+className</p>    <p  class="fl_l" id="p_3">setAttrbutes</p>    <p  class="fl_l p_style" id="p_4">cssText拼接</p>  </div>  <script>    var p_1 = document.getElementById("p_1");    var p_2 = document.getElementById("p_2");    var p_3 = document.getElementById("p_3");    var p_4 = document.getElementById("p_4");    p_1.onmouseenter = function () {        p_1.style.color = "white";        p_1.style.backgroundColor = "deeppink";        p_1.style.fontSize = "18px";    }    p_1.onmouseleave = function () {        p_1.style.color = "black";        p_1.style.backgroundColor = "white";        p_1.style.fontSize = "16px";    }//    p_2.onmouseenter = function () {//        p_2.className = "onenter";//    }//    p_2.onmouseleave = function () {//       p_2.className  = "";//    }    p_2.onmouseenter = function () {        //拼接        var name = p_2.className;        name+=" ";        name+=" onenter"        p_2.className = name;    }    p_2.onmouseleave = function () {        p_2.className  = "fl_l";    }    p_3.onmouseenter = function () {        var name = p_2.className;        name+=" ";        name+=" onenter"        p_3.setAttribute("class",name);    }    p_3.onmouseleave = function () {       p_3.setAttribute("class","fl_l");    }    p_4.onmouseenter = function () {      this.style.cssText +="color:white;background:deeppink;"    }    p_4.onmouseleave = function () {        this.style.cssText+="background:white;color:red;"    }  </script></body></html>

显示效果如下所示:

这里写图片描述

阅读全文

1 0