利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作

HTML中引入CSS样式的方式有三种：

1.最常用的，引入样式表，在样式表中编写样式，引入方式如下：
<link href="css/style.css" rel="stylesheet" type="text/css">
2.在Html头部用<style></style>包起来，在这里面编写样式：
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
3.在标签里面直接编写行内样式。
<div style="color: #333"><div>

下面就简单的介绍下利用JS对内联样式进行操作：

脚本化CSS最直接的方法就是更改单独的文档元素的style的属性值，类似大多数的HTML的属性，style也是元素对象的属性，其可以在JS中对其进行操作。由于style具有特殊性，通常style中的属性不只有一个，因而style的值不单单只是一个字符串，而是一个CSSStyleDeclaration对象。通过对该对象的操作可以利用JS更改元素的样式。利用JS操作CSS样式需要注意以下几点：

（1）通常通过HTML的属性和利用<style>标签定义的样式属性的面子中会包含有一个或者多个连字符如：background-color，但是在JS中两字符是减号，像前面那样书写会报错的。因而在利用JS对属性进行操作时首先将连字符去掉，同时需要将原来紧连着连字符的后的字符转换为大写。这样CSS属性border-width就转换为了：borderWidth。JS中通过如下的方法对CSS样式属性进行访问：e.style.borderWidth="2px"。另外CSS属性中如果使用了JS中的保留字，则需要在上述的基础上加上CSS，如CSS中的float属性，利用CSSStyleDeclaration对象的cssFloat属性来进行设置。

（2）CSS样式属性值在CSSStyleDeclaration对象中使用时需要利用字符串形式。同时所有的定位属性(如：width，height，top，left等)都需要加上单位px。这样再利用JS 对其进行运算时需先对字符串进行处理（可以利用字符串对象的方法split）。

（3）JS中获取属性值和给属性赋值的几种方式：

a、直接利用CSSStyleDeclaration对象进行操作

b、getAttribute（）和setAttribute（）分别对获取属性值和给某属性赋值。

但是通过以上两种方式对CS样式的属性进行操作时，只能获取已经通过JS代码进行设置过的值或者通过HTML元素显示设置了想要的内联样式的值（即在HTML标签中通过属性style进行设置了的属性值）。也就是说文档可能包含一个样式表以设置div的宽度均为300px,但是通过JS读取该属性时将会得到一个空的字符串，除非在JS中已经有一个style属性覆盖了样式列表中的设置。

c、利用window对象的方法getComputedStyle（）获取计算后的样式，该方法是可以获取上面不能获得到的属性值得，但是通过该方法获取到的属性是只读的，同时都是绝对值（如width用百分比表示的会计算转换为具体的数值，颜色会转换成rgba），而且该方法不计算复合属性，不能获取符合属性的值。

d、通过获取元素对象后利用element.css({width:50px; height:50px;})的方式也可以为元素对像添加样式。