样式表有外部样式表、内部样式表、行内样式。
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=" 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=" 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>
结果：
