2015 03 12 簡析DOM2級樣式

2022-02-21 21:36:06 字數 2483 閱讀 2575

cssstylesheet物件  表示某種型別的樣式表

cssstylerule物件  樣式表中的每條規則

獲得文件中的所有樣式表

document.stylesheets

cssstylesheet物件

屬性type  text/css

disabled  表示樣式表是否應用於當前文件。應用/禁用,false/true

href  樣式表相對於當前文件所在的url

title  可以用來分組樣式表的標籤

media  表示目標裝置型別,screen或print  下一級屬性,w3c  mediatext  ie  無

ownerrule  乙個唯讀的cssrule物件,表示其父規則

cssrules  乙個唯讀的cssrulelist列表物件,包含樣式表中所有cssrule物件  ie中為rules

方法insertrule(rule, index);  ie  addrule(selector, declaration, index);

deleterule(index);

沒有專門用於編輯的方法,只能通過修改rules[i]的style屬性直接更改。相比於直接修改element的style屬性,其可以實現繼承。

cssstylerule物件

type  繼承自cssrule物件的乙個屬性,已0-6表示其規則型別。對於cssstylerule型別的規則而言,該屬性值始終為1。

csstext  表示當前狀態下的全部規則。如果被js修改了,該字串也會相應改變。

parentstylesheet  引用父cssstylesheet物件。

parentrule  如@media

selectortext  規則的選擇符

style  與htmlelement.style類似,是cssstyledeclaration物件乙個例項。

cssstyledeclaration物件

csstext  以字串形式表示全部規則。

parentrule  引用cssstylerule物件

getpropertyvalue(porpertyname);

removeproperty(propertyname);

setproperty(propertyname, value, priority);  ie不支援,只能直接通過style,以快捷的方式訪問。

還有乙個通過css2properties訪問cssstyledeclaration物件例項(例如htmlelement的style屬性)的快捷方法。

style屬性

通過style屬性只能訪問到元素style屬性中已嵌入的方式宣告的css屬性。style屬性無法訪問由多重樣式表層疊而來或從父元素繼承而來的任何css屬性。

基於classname切換樣式

classname引用的是htmlelement物件的class屬性。

為什麼不用setattribute設定class屬性?

w3c  element.setattribute('class', 'name');

ie  element.setattribute('classname', 'name');

切換樣式表

1、可以使用元素的rel屬性定義備用的樣式表

2、給body標籤應用乙個類名

3、新增或移除樣式表

元素的屬性

type

href

media

rel  "stylesheet"立即應用  "alternate stylesheet"備用,可以用來控制樣式表的啟用與否

disabled  是否禁用

title  樣式表的標題,可用來組合多個樣式表。

樣式表所屬節點

w3c  stylesheet.ownernode

ie  stylesheet.owningelement

修改css規則

只能通過修改rules[i]的style屬性,直接更改,沒有專用的方法。相比於直接修改element的style屬性,其可以實現繼承。

增加css規則

dom2

index = length是列表末尾

stylesheets[i].insertrule(rule, index);

ieindex = -1是列表末尾

stylesheets[i].addrule(selector, declaration, index);

dom2 規範中可以使用偽類

a[href]:after

訪問計算樣式

dom2樣式規範中,在document.defaultview中包含了乙個叫getcomputedstyle()的方法,返回乙個唯讀的cssstyledeclaration物件。其中包含了,所有的計算樣式。

document.defaultview.getcomputedstyle(element, null);  //第二個引數,偽類

ie中使用 element.currentstyle[propertyname]

事件流程以及dom2級事件繫結

事件流程分為三個階段 捕獲階段 目標階段 冒泡階段。捕獲階段 事件從最頂層元素開始執行,一層層往下,直到精確元素。目標階段 事件在精確元素上執行。冒泡階段 事件從精確元素開始執行,一層層往上,直到頂層元素 注 高階瀏覽器的頂層元素是window,ie8以下的瀏覽器頂層元素是document dom2...

事件繫結 DOM0級事件繫結和DOM2級事件繫結

box.onclick function 元素.事件行為 函式 box.onclick function 相當於給乙個元素的屬性賦值,只能賦乙個值,後面如果再賦值就會覆蓋前面的值,所以說dom0級事件只可以繫結一次,如果繫結多次,後面的會把前面的給覆蓋了,因為是乙個賦值的過程,乙個屬性只能賦乙個值 ...

dom0 和 dom2事件 簡略

dom級別 4級 dom0,dom1,dom2,dom3 dom事件 3級 dom0級事件 dom2級事件 dom3級事件 為什麼 沒有 dom1級事件?因為 dom1級 中 沒有定義 事件相關的 內容 dom0 通過 onclick 繫結事件 或者 input.nclick function on...