W3C DOM2 樣式規范

CSSStyleSheet對象

表示所有css樣式表，包括外部link和嵌入style的;通過document.styleSheets屬性可以獲得文檔中CSSStyleSheet對象的列表；其中每個CSSStyleSheet都具有以下屬性：

• type: 值始終是text/css;
• disabled: 布爾值，表示相應的樣式表是否應用與當前文檔(false)還是被禁用(true);
• href: 樣式表路徑，嵌入的則是null;
• media: 表示樣式表應用的目標設備, 中的media屬性
• cssRules: 是一個只讀的CSSRuleList列表對象，包含樣式表中所有的CSSRule對象；
• insertRule(rule, index): 添加新的樣式聲明；index表示列表對象cssRules的值；
• deleteRule(index), 用于樣式表中移除規則；

CSSStyleRule對象

每個CSSStyleSheet對象內部包含著一組CSSStyleRule對象 document.styleSheets[0].cssRule, 每個對象 document.styleSheets[0].cssRule[0]有如下屬性:

• type, 繼承自CSSRule對象的一個屬性，對CSSStyleRule類型而言是1；
• cssText: 包含以只付出形式表示的當前狀態下的全部規則；如果這些規則被其他DOM方法改變了，那么這個字符串也會相應改變;
• parentStyleSheet: 引用父CSSStyleSheet對象;
• parentRule: 如果規則位于另一個規則中，該屬性則引用另一個CSSRule對象;
• selectorText: 包含規則的選擇符；

CSSStyleDeclaration對象

這是用的最多的對象，表示一個元素的style屬性（內嵌在元素中的值） A.$('a').style

• cssText：包含以字符串形式表示的全部規則;
• parentRule: 講引用CSSStyleRule對象；
• getPropertyValue(propertyName), 返回一個字符串形式的CSS樣式屬性值;
• removeProperty(propertyName), 從聲明中移除特定的屬性；
• setProperty(propertyName, value, priotity), 用于設置特定css屬性的值;

把樣式置于DOM腳本之外

style屬性

注意通過此屬性只能訪問到在元素的style屬性中以嵌入方式聲明的css屬性，無法訪問層疊樣式表或從父類繼承的屬性

• element.style.setProperty('background-color','red'); //在ie8及以下無效
• element.style.backgroundColor = 'red';//都有效

style引用的是HTMLElement對象的style屬性,本身是CSSStyleDeclaration對象；一般使用第一種并兼容第二種

基于className切換樣式

• element.setAttribute('class','newClassName'); //在ie8及以下無效
• element.className = 'newClassName'; //都有效

className引用的是HTMLElement對象的class屬性，兼容性考慮一般用第二種方法

切換樣式表

• 使用備用的樣式表

常用屬性

* type * href * media * rel, 表示樣式表于文檔之間的關系* 設置'stylesheet' 指定一個樣式表立即應用到文檔* 設置'alternate stylesheet' 將其作為備用樣式表；瀏覽器載入該樣式表時會將其disbaled設置為true； * disabled, 表示樣式表是否起作用 * title, 標題，也在腳本中用到；

通過js操作disabled值改變樣式

• 切換body元素的className

先用設置公用樣式，然后分別設置body.a;body.b等及下面的元素樣式；最后通過改變body的classname來改變樣式

• 動態載入和移除樣式表

直接通過js刪減樣式表

修改css規則

• document.styleSheets能獲得所有內嵌和外鏈的樣式表,可以通過href判斷

訪問計算樣式

DOM2樣式規范在document.defaultView中包含了一個getComputedStyle()方法；返回一個只讀的CSSStyleDeclaration對象

var elemet = A.$('example'); var styles = document.defaultVIew.getComputedStyle(element); var color = styles.getProperty('background-color');

簡單的漸變效果

function fadeColor(from ,to ,callback , duration, framesPerSecond) {function doTimeout(color, frame) {setTimeout(function() {try{callback(color);} catch(e) {A.log.write(e);}}, (duration * 1000 / framesPerSecond) * frame );}var duration = duration || 1;var framesPerSecond = framesPerSecond || duration * 15;var r, g ,b;var frame = 1;doTimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')', 0);while(frame < framesPerSecond + 1) {r = Math.ceil(from.r * ((framesPerSecond - frame) / framesPerSecond) + to.r * (frame / framesPerSecond));g = Math.ceil(from.g * (framesPerSecond - frame) / framesPerSecond + to.g * (frame / framesPerSecond));b = Math.ceil(from.b * ((framesPerSecond - frame) / framesPerSecond) + to.b * (frame / framesPerSecond));doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame);frame++;}} fadeColor({r:0, g:255, b:0}/*開始顏色*/, {r: 255, g:255, b:255}/*結束顏色*/, function(color) {A.setStyleById('style', {'background-color': color}) });

轉載于:https://www.cnblogs.com/jinkspeng/p/4270544.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的DOM--5 动态修改样式和层叠样式表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。