第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

章節(jié)
問答
課簽
筆記
評論
占位
占位

理解樣式

我們知道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)化

 

任務(wù)

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗(yàn)證,完成請求

由于請求次數(shù)過多,請先驗(yàn)證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務(wù)號

綁定后可得到

  • · 粉絲專屬優(yōu)惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復(fù)提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關(guān)注公眾號
關(guān)注后,及時(shí)獲悉本課程動態(tài)

舉報(bào)

0/150
提交
取消
全部 精華 我要發(fā)布
全部 我要發(fā)布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費(fèi)2個(gè)積分

你的積分不足,無法發(fā)表

為什么扣積分?

本次提問將花費(fèi)2個(gè)積分

繼續(xù)發(fā)表請點(diǎn)擊 "確定"

為什么扣積分?