js操作元素样式

Posted 2020-10-03 资料整理中。。。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js操作元素样式相关的知识，希望对你有一定的参考价值。

样式表有外部样式表、内部样式表、行内样式。

js改变css样式也是有三种。针对于外部样式表如果不采用后台技术，只是单纯的用js是不能实现的。所以下面只讨论两个方法。

一、js改变内部样式

其操作方法和一般标签一样，给style标签加一个类名或id，然后js中获取该元素，向里面添加内容即可改变样式。

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <style id="css">    
 6     body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
 7     #box{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12   </style>
13  </head>
14  <body>
15   <div id="box"></div>
16   <script type="text/javascript">
17     var obox = document.getElementById("css");    
18     obox.innerHTML += "#box{background: green;}" /* 把盒子变绿 */
19   </script>
20  </body>
21 </html>

结果可以看到盒子由红色变成绿色。这种方法比较笨拙，不常用。

二、js改变行内样式

1）通过合法属性style来改变样式或获取样式。

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <style id="css">    
 6     body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
 7     #box{
 8         width: 100px;
 9         height: 100px;
10         background: red;
11     }
12   </style>
13  </head>
14  <body>
15   <div id="box" style=""></div>
16   <script type="text/javascript">
17     var obox = document.getElementById("box");    
18     obox.style.background = "green"; /* 把盒子变绿 */
19     alert(obox.style.background);    /* 读取css样式 */
20   </script>
21  </body>
22 </html>

需要注意的是css样式中，有的属性名会有连字符号，这时需要把连字符号去掉并且把后面单词的第一个字母大写，即驼峰命名法。这样做的目的是因为js中，会认为连字符号是减号。

如：margin-left在js中就是XXX.style.marginLeft

2）把css写在一起，可以用XXX.style.cssText = "样式";读取css样式时，也是用这个方法读取。

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <style id="css">    
 6     body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
 7   </style>
 8  </head>
 9  <body>
10   <div id="box" style="width: 100px; height: 100px; background: red;"></div>
11   <script type="text/javascript">
12     var obox = document.getElementById("box");
13     alert(obox.style.cssText);    /* 读取css样式 */
14   </script>
15  </body>
16 </html>

结果：

3）提高修改css性能的方法

只要在js中修改一次css，浏览器就会重绘一次页面，非常降低性能。为了提高性能其中一种方法是利用cssText来一次修改所有样式,但是不方便。

为了在js尽量减少css的操作，直接用名字去代替，即把要修改的样式写在内部样式中，然后取个类名即可。

示例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style id="css">    
    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
    #box{
        width: 100px;
        height: 100px;
        background: red;
    }
    #box.boxclass{    /* 取个别名 */
        background: green;
    }
  </style>
 </head>
 <body>
  <div id="box"></div>
  <script type="text/javascript">
    var obox = document.getElementById("box");
    obox.className = "boxclass"; /* 选用className来操作，不直接操作属性值 */
  </script>
 </body>
</html>

三、[]的使用

[]除了表示下标外，还可以表示变量，能代替大部分点的使用。

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <style id="css">    
 6     body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
 7   </style>
 8  </head>
 9  <body>
10   <div id="box" style="width: 100px; height: 100px; background: red;"></div>
11   <script type="text/javascript">
12     var obox = document.getElementById("box");    
13     var x = "width";
14     alert(obox.style[x]);    /* 相当于obox.style.width */
15   </script>
16  </body>
17 </html>

结果：

以上是关于js操作元素样式的主要内容，如果未能解决你的问题，请参考以下文章