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 {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操作元素樣式