Javascript 操作CSS 学习笔记

页面往往是动态变化的，我们经常需要在脚本里对元素的样式进行操作，刚学习js的时候大家都知道通过style属性设置css样式相关的属性，但有时候也想先获取样式，结果发现通过style取到的值是空，这就需要我们对这些概念足够熟练。

一、设置样式

每个dom元素都具有一个style属性，与平常的属性不一样，style的值是一个CSSStyleDeclaration对象，这个对象的属性代表了该对应元素的内联样式。
注意上面说的是内联样式，我们知道，在<link>内引用的样式称为外部样式，在<style>标签内书写的样式称为外联样式，而在元素标签内通过style属性直接赋值的就叫内联样式。
虽然大多数情况下我们都使用的是外部样式，但同等条件下，内联样式的优先级是高于外部样式的，我们给元素的style属性赋值，就相当与给其指定了内联样式，所以覆盖了原先相同属性的样式。这也是为什么有时候通过style属性拿不到值的原因：因为你并没有给元素指定内联样式。

<style>
    #box{
        width: 100px;
        height: 100px;
        /* 在外联样式内设置color值 */
        color: #fff;
        background-color: #ff9000;
    }
</style>

<!--在内联样式中设置position-->
<div id="box" style="position: relative">盒子</div>

var box = document.getElementById("box");
console.log(box.style.color);   //空，因为没有在内联样式内设置color属性
console.log(box.style.position);   //输出"relative"， 因为在内联样式中设置了position
box.style.color = "#000";   //成功设置color值
console.log(box.style.color);   //输出"rgb(0, 0, 0)"，因为刚才已经设置

命名约定

因为在js中连字符就是减号，所以在css里类似与font-size: 20px这种带有连字符的属性是不能直接通过style.font-size访问的，应该将连字符去掉，并将连字符后面第一个字母大写，或者通过数组访问形式赋值，如：

box.style.fontSize = "20px";
//或 box.style["font-size"] = "20px"

另外对于在js中是保留字符的属性如float，最好给其加入css前缀使其成为一个合法的属性，如

box.style.cssFloat = "left";

注意

style的所有属性的值都应该是字符串，在使用style设置定位属性时，所有定位属性都需要包含单位。

box.style.left = 300;    //无效，300不是字符串
box.style.left = "300";     //无效，没有带单位
box.style.left = "300px";   //这就对了

综上，使用style对于设置样式还是比较方便的，但对于读取样式就非常困难了，首先返回的值都带有单位，其次对于像margin这种复合属性因为获取的是字符串，所以还需要对其进行拆分出四个方向的值。

最后，通过setAttribute和设置style的cssText值，也可以一次性写好所有样式，一次性赋值给元素：

var s = "float: left; margin: 0 10px;"
box.setAttribute("style", s);
//或者
box.style.cssText = s;

//读取也是一样的
s = box.getAttribute("style");
//或者
s = box.style.cssText;

获取计算样式

我们一般情况下其实并不关心到底是内联样式还是外联样式，只是想获取元素的样式值，元素最终显示时实际使用的属性值就成为计算样式。
计算样式也是一个CSSStyleDeclaration对象，通过window对象调用。（IE8以下不支持）

var styles = window.getComputedStyle(element, ":before");

可以看到，第一个参数代表需要获取样式的元素，第二个参数代表伪对象的字符串，如果不需要可以设置成null或空字符串。

同样使用属性进行访问：

var styles = window.getComputedStyle(box, "");
console.log(styles.marginLeft);         //输出"0px"，虽然并没有显示指定过marginLeft

区别

虽然通过style和getComputedStyle获取到的都是CSSStyleDeclaration对象，但它们还是有些区别的。

1. 后者（通过getComputedStyle获取到的CSSStyleDeclaration对象）的属性都是只读的。
2. 后者的值都是绝对值，也就是说你设置的可能是”50%”这种百分比，到最后获取到的都是具体的数值，尺寸大小表示为px为后缀的字符串，颜色表示为“rgb(#, #, #)”或 “rgba(#, #, # ,#)”。
3. 不计算复合属性如margin，将返回空字符串（根据浏览器而不同，chrome支持返回）。最好使用具体的属性如marginLeft等。
4. 没有cssText属性，将返回空字符串（根据浏览器而不同，chrome支持返回）。
5. 对于定位属性，如果不是绝对定位，访问left、top等定位属性都返回”auto”

所以我们既要读取样式又要设置样式的时候可以结合二者进行使用。如

var box = document.getElementById("box");
var styles = window.getComputedStyle(box, "");
//将文本尺寸放大两倍
var size = parseInt(styles.fontSize);
box.style.fontSize = size * 2 + "px";

对于IE，有其自身的CSSStyleDeclaration对象，通过currentStyle获取。

三、设置类名

很早以前，获取一个元素的类名都是通过className属性获取的，对于只有单个类名的元素好说，一旦元素具有多个类名，得到的将是多个类名通过空格符隔开的字符串，需要自行进行分解。

<div id="box" class="red btn whatever">盒子</div>

var box = document.getElementById("box");
console.log(box.className); //"red btn whatever"

在HTML5里面，元素新增了一个classList属性，它是一个只读对象，但提供了操作类名非常方便的方法：

• add(className) 添加类名
• remove(className) 移除类名
• toggle(className) 如果不存在此类名则添加，存在则删除这个类名
• contains(className) 检测是否包含指定的类名

有了这些方法就方便多了（对于不支持的浏览器，当然其实你也可以自己去实现这些方法）

var classList = box.classList;
classList.add("aaa");
console.log(box.className);     //"red btn whatever aaa"
classList.remove("red");
console.log(box.className);     //"btn whatever aaa"
classList.toggle("bbb");
console.log(box.className);     //"btn whatever aaa bbb"
classList.contains("aaa");      //true