js操作元素樣式
阿新 • • 發佈：2017-08-22
span 實現 type css樣式 變量 cnblogs pla logs 示例
樣式表有外部樣式表、內部樣式表、行內樣式。
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
結果可以看到盒子由紅色變成綠色。這種方法比較笨拙，不常用。
二、js改變行內樣式
1）通過合法屬性style來改變樣式或獲取樣式。
示例：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <style id="css">
6
需要註意的是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操作元素樣式