4-1 理解样式

我们知道HTML样式定义的三种方式：

<link/>外部引入也就是定义 CSS 中的
<style/>嵌入式样式
style特性地定义

给一个HTML元素设置css属性，如：

var head= document.getElementById("head");
head.style.width = "20px";
head.style.height = "10px";
head.style.display = "block";

这是 DOM2 级样式提供的 API 了，这里总的来说还涉及了3个问题，当然也是 jQuery 内部需要解决与优化的问题。

1.单一的设置太麻烦，而且每次style一次就等于浏览器要绘制一次，当然高级的浏览器是可能会合并 style 的次数的
2.style 接口只能针对行类样式，对于 link 引入的样式，无法获取
3.样式属性名的兼容问题，比如驼峰，保留字 float

样式规则

任何支持 style 特性的 HTML 元素在 js 中有一个对象的 style 属性，其实也是一个实例，但是内部属性命名都是采用的驼峰形式的，比如 background-image 要写成  backgroundImage，其中一个是比较特殊的就是 float，保留字嘛所以就换成 cssFloat，IE : styleFloat，然后对于width、hight这些处理都最好要有一个量度单位。

合并cssText

可能针对一种情况给出的处理就是 cssText 合并。

var head= document.getElementById("head");
head.style.cssText="width:20px;height:10px;display:bolck";

和 innerHTML 一样，cssText 很快捷且所有浏览器都支持。此外当批量操作样式时，cssText 只需一次 reflow，提高了页面渲染性能。当然如果是在创建的时候，我们还可以利用文档碎片，缺点自然就是样式被整体覆盖了，所以在处理的时候应该要先获取需要保留的样式然后再拼接起来。

样式访问

之前说过了 style 只能获取行类样式了，那么CSS外部样式表定义的样式如何处理？

DOM2 规范增加了 defauleView 接口，提供了 getComputedStyle() 方法可以返回了类似 style 属性的 css 的属性合集

getComputedStyle与style的区别

区别就在于 getComputedStyle 是只能读的，style是可以可读可写的。

看看jQuery的：

elem.ownerDocument.defaultView.getComputedStyle(elem, null);

实际就是：

function getStyles( elem ) {
   return window.getComputedStyle( elem, null )
}

没有defauleView前缀，查了下在浏览器中，该属性返回当前 document 对象所关联的 window 对象，如果没有，会返回 null，应该就能直接window调用了。当然啦，IE 这个老大反正就不怎么守规矩了，getComputedStyle 方法 IE6~8 是不支持，所以自己弄出来了currentStyle，处理类似 style 的处理了，jQuery2X 可以无视IE9以下的兼容了，所以这个略过。

以上就是样式操作需要了解的基础，那么总的来说 jQuery 需要的处理问题就显而易见了。

1 参数传递
2 命名规范
3 访问规则
4 性能优化