我們知道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 級樣式提供的 API 了,這里總的來說還涉及了3個(gè)問題,當(dāng)然也是 jQuery 內(nèi)部需要解決與優(yōu)化的問題。
1.單一的設(shè)置太麻煩,而且每次style一次就等于瀏覽器要繪制一次,當(dāng)然高級的瀏覽器是可能會合并 style 的次數(shù)的 2.style 接口只能針對行類樣式,對于 link 引入的樣式,無法獲取 3.樣式屬性名的兼容問題,比如駝峰,保留字 float
樣式規(guī)則
任何支持 style 特性的 HTML 元素在 js 中有一個(gè)對象的 style 屬性,其實(shí)也是一個(gè)實(shí)例,但是內(nèi)部屬性命名都是采用的駝峰形式的,比如 background-image 要寫成 backgroundImage,其中一個(gè)是比較特殊的就是 float,保留字嘛所以就換成 cssFloat,IE : styleFloat,然后對于width、hight這些處理都最好要有一個(gè)量度單位。
合并cssText
可能針對一種情況給出的處理就是 cssText 合并。
var head= document.getElementById("head"); head.style.cssText="width:20px;height:10px;display:bolck";
和 innerHTML 一樣,cssText 很快捷且所有瀏覽器都支持。此外當(dāng)批量操作樣式時(shí),cssText 只需一次 reflow,提高了頁面渲染性能。當(dāng)然如果是在創(chuàng)建的時(shí)候,我們還可以利用文檔碎片,缺點(diǎn)自然就是樣式被整體覆蓋了,所以在處理的時(shí)候應(yīng)該要先獲取需要保留的樣式然后再拼接起來。
樣式訪問
之前說過了 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 ) }
沒有defauleView前綴,查了下在瀏覽器中,該屬性返回當(dāng)前 document
對象所關(guān)聯(lián)的 window 對象,如果沒有,會返回 null,
應(yīng)該就能直接window調(diào)用了。當(dāng)然啦,IE 這個(gè)老大反正就不怎么守規(guī)矩了,getComputedStyle
方法 IE6~8 是不支持,所以自己弄出來了currentStyle,處理類似 style 的處理了,jQuery2X 可以無視IE9以下的兼容了,所以這個(gè)略過。
以上就是樣式操作需要了解的基礎(chǔ),那么總的來說 jQuery 需要的處理問題就顯而易見了。
1 參數(shù)傳遞 2 命名規(guī)范 3 訪問規(guī)則 4 性能優(yōu)化
請驗(yàn)證,完成請求
由于請求次數(shù)過多,請先驗(yàn)證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)