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...