我們知道HTML樣式定義的三種方式：

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

給一個(gè)HTML元素設(shè)置css屬性，如：

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

這是 DOM2 級(jí)樣式提供的 API 了，這里總的來(lái)說(shuō)還涉及了3個(gè)問(wèn)題，當(dāng)然也是 jQuery 內(nèi)部需要解決與優(yōu)化的問(wèn)題。

1.單一的設(shè)置太麻煩，而且每次style一次就等于瀏覽器要繪制一次，當(dāng)然高級(jí)的瀏覽器是可能會(huì)合并 style 的次數(shù)的
2.style 接口只能針對(duì)行類樣式，對(duì)于 link 引入的樣式，無(wú)法獲取
3.樣式屬性名的兼容問(wèn)題，比如駝峰，保留字 float

樣式規(guī)則

任何支持 style 特性的 HTML 元素在 js 中有一個(gè)對(duì)象的 style 屬性，其實(shí)也是一個(gè)實(shí)例，但是內(nèi)部屬性命名都是采用的駝峰形式的，比如 background-image 要寫成  backgroundImage，其中一個(gè)是比較特殊的就是 float，保留字嘛所以就換成 cssFloat，IE : styleFloat，然后對(duì)于width、hight這些處理都最好要有一個(gè)量度單位。

合并cssText

可能針對(duì)一種情況給出的處理就是 cssText 合并。

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

和 innerHTML 一樣，cssText 很快捷且所有瀏覽器都支持。此外當(dāng)批量操作樣式時(shí)，cssText 只需一次 reflow，提高了頁(yè)面渲染性能。當(dāng)然如果是在創(chuàng)建的時(shí)候，我們還可以利用文檔碎片，缺點(diǎn)自然就是樣式被整體覆蓋了，所以在處理的時(shí)候應(yīng)該要先獲取需要保留的樣式然后再拼接起來(lái)。

樣式訪問(wèn)

之前說(shuō)過(guò)了 style 只能獲取行類樣式了，那么CSS外部樣式表定義的樣式如何處理？

DOM2 規(guī)范增加了 defauleView 接口，提供了 getComputedStyle() 方法可以返回了類似 style 屬性的 css 的屬性合集

getComputedStyle與style的區(qū)別

區(qū)別就在于 getComputedStyle 是只能讀的，style是可以可讀可寫的。

看看jQuery的：

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

實(shí)際就是：

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

沒(méi)有defauleView前綴，查了下在瀏覽器中，該屬性返回當(dāng)前 document 對(duì)象所關(guān)聯(lián)的 window 對(duì)象，如果沒(méi)有，會(huì)返回 null，應(yīng)該就能直接window調(diào)用了。當(dāng)然啦，IE 這個(gè)老大反正就不怎么守規(guī)矩了，getComputedStyle 方法 IE6~8 是不支持，所以自己弄出來(lái)了currentStyle，處理類似 style 的處理了，jQuery2X 可以無(wú)視IE9以下的兼容了，所以這個(gè)略過(guò)。

以上就是樣式操作需要了解的基礎(chǔ)，那么總的來(lái)說(shuō) jQuery 需要的處理問(wèn)題就顯而易見了。

1 參數(shù)傳遞
2 命名規(guī)范
3 訪問(wèn)規(guī)則
4 性能優(yōu)化