再談javascript 動態(tài)添加樣式規(guī)則 W3C校檢
更新時(shí)間：2009年12月25日 02:52:31 作者：
Ruby's Louvre blog都是一些精品內(nèi)容，下面這個(gè)是介紹javascript 動態(tài)添加樣式規(guī)則，而且最后的函數(shù)，可以讓你的css通過w3c的驗(yàn)證。
毫無疑問，基于表現(xiàn)與結(jié)構(gòu)相分離的原則，直接導(dǎo)入一個(gè)新的樣式表是最好的選擇，但有些情況就行不通，如我們做一個(gè)能拖動的DIV，從設(shè)置樣式的角度看，就是把它絕對定位，以防影響原來的文檔流，然后一點(diǎn)點(diǎn)改變其top與left的值實(shí)現(xiàn)移動的效果。由于拖動是有時(shí)間概念的，一秒24幀，樣式表不可能面面俱到都把它們寫進(jìn)去。因此動態(tài)生成樣式規(guī)則與快速修改樣式規(guī)則是非常有必要的，W3C為此做了大量的工作，在DOM2.0中，擴(kuò)充了不少接口。
退一步說，表現(xiàn)與結(jié)構(gòu)相分離也不止導(dǎo)入樣式表這一條路。要知道，一共有三種樣式類型，外部樣式，內(nèi)部樣式，與內(nèi)聯(lián)樣式。
* 外部樣式，就是我們上面說的那個(gè)，寫在一個(gè)獨(dú)立的CSS文件中。
* 內(nèi)部樣式，就是獨(dú)立寫在一個(gè)style標(biāo)簽中，通常是放在head標(biāo)簽中，我最后提供的函數(shù)生成的樣式就是內(nèi)部樣式。
* 內(nèi)聯(lián)樣式，就是寫在元素的style屬性中的樣式。
新添加的接口主要集中在外部樣式中——之所以說接口，因?yàn)橄鄳?yīng)的實(shí)現(xiàn)是由瀏覽器方提供的，像IE6那樣傲慢的家伙，從來無視它們的存在。
在W3C的模型中，type為"text/css"的link標(biāo)簽與style標(biāo)簽都是代表一個(gè)CSSStyleSheet對象，我們可以通過 document.styleSheets 獲得當(dāng)前頁面中所有的CSSStyleSheet對象，不過這是一個(gè)集合，非單純的數(shù)組。每一個(gè)CSSStyleSheet對象擁有如下屬性，
* type：永遠(yuǎn)返回“text/css”字符串。
* disabled：和input的disabled的作用相同，默認(rèn)是false。
* href：返回URL，如果是style標(biāo)簽為null。
* title：返回其title的值，title與普通元素的title無異，隨你寫什么。
* media：IE與火狐返回的東西并不一致，不太好說。media是用來規(guī)定它擁有的樣式規(guī)則對什么設(shè)備有效，默認(rèn)是所有。
* ownerRule：返回一個(gè)只讀的CSSRule對象，如果樣式表是用@import引入的話。
* cssRules： 返回一個(gè)只讀的樣式規(guī)則對象（CSSStyleRule object）的集合。
樣式規(guī)則對象(CSSStyleRule object)，是W3C為了對樣式進(jìn)行更細(xì)致的設(shè)定而搞出來的，如下面這個(gè)東西就是對應(yīng)一個(gè)樣式規(guī)則對象:
button[type] {
padding:4px 10px 4px 7px;
line-height:17px;
}
樣式規(guī)則對象擁有如下幾個(gè)主要屬性：type,cssText,parentStyleSheet，parentRule。
type有點(diǎn)類似節(jié)點(diǎn)的nodeType，對樣式規(guī)則進(jìn)行細(xì)分，它是用一個(gè)整數(shù)來表示其類型。具體情況如下
* 0: CSSRule.UNKNOWN_RULE
* 1: CSSRule.STYLE_RULE (定義一個(gè)CSSStyleRule對象)
* 2: CSSRule.CHARSET_RULE (定義一個(gè)CSSCharsetRule對象，用于設(shè)定當(dāng)前樣式表的字符集，默認(rèn)與當(dāng)前網(wǎng)頁相同)
* 3: CSSRule.IMPORT_RULE (定義一個(gè)CSSImportRule對象，就是用@import引入其他的樣式表)
* 4: CSSRule.MEDIA_RULE (定義一個(gè)CSSMediaRule對象，用于設(shè)定此樣式是用于顯示器，打印機(jī)還是投影機(jī)等等)
* 5: CSSRule.FONT_FACE_RULE (定義一個(gè)CSSFontFaceRule對象，CSS3的@font-face)
* 6: CSSRule.PAGE_RULE (定義一個(gè)CSSPageRule對象)
cssText不用多說，一個(gè)非常有用的屬性，直接把字符串轉(zhuǎn)換成樣式規(guī)則，無視各瀏覽器樣式屬性的差異，如cssFloat 和styleFloat。
parentStyleSheet和parentRule都是針對@import來說的。不過，@import在IE下有問題，我基本不用它。
還有幾個(gè)生不逢時(shí)的方法：
* nsertRule(rule,index): 添加一條樣式規(guī)則。
* deleteRule(index): 移除一條樣式規(guī)則。
* getPropertyValue(propertyName) 獲取元素相應(yīng)樣式屬性的值。如我們獲得一個(gè)樣式規(guī)則對象，可以利用CSSStyleRuleObject. getPropertyValue("color")獲得其字體顏色的設(shè)置。與普通的el.style.color的方法相比，其效率相當(dāng)高，因?yàn)?el.style.color獲取的是內(nèi)聯(lián)樣式，像IE那樣的怪胎，如果你的元素沒有設(shè)置style屬性，根本無法得到準(zhǔn)備的值，可能為空，可能是 inhert……可能還有兼容問題，而且這內(nèi)聯(lián)屬性不一定是最終應(yīng)用于元素的樣式，IE只有調(diào)用不那么廢物的 el.currentStyle[prop]，其他瀏覽器就調(diào)用相當(dāng)爭氣但有點(diǎn)麻煩的document. defaultView. getComputedStyle(el, "")[prop]。
* removeProperty(propertyName) 移除元素相應(yīng)樣式屬性。
* setProperty(propertyName,value,priority)設(shè)定元素添加一個(gè)樣式，還能指定優(yōu)先級。
我們可以弄一個(gè)設(shè)定樣式的函數(shù)出來：
var hyphenize =function(name){
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
}
var camelize = function(name){
return name.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
}
var setStyle = function(el, styles) {
for (var property in styles) {
if(!styles.hasOwnProperty(property)) continue;
if(el.style.setProperty) {
//必須是連字符風(fēng)格，el.style.setProperty('background-color','red',null);
el.style.setProperty(hyphenize(property),styles[property],null);
} else {
//必須是駝峰風(fēng)格，如el.style.paddingLeft = "2em"
el.style[camelize(property)] = styles[property]
}
}
return true;
}
使用方法：
setStyle(div,{
'left':0,
'top':0,
'line-height':'2em',
'padding-right':'4px'
});
不過我非常不喜歡這方法，生成的是內(nèi)聯(lián)樣式，它還得特殊處理float與opacity。在IE7的內(nèi)聯(lián)樣式中，濾鏡還有一個(gè)Bug，一定要讓其得到hasLayout，要不濾鏡就不會生效(我們可以通過el.currentStyle.hasLayout查看其狀況)。因此，如其一個(gè)個(gè)設(shè)置，不如用cssText一網(wǎng)打盡。
最后附上我的加強(qiáng)版addSheet方法。它增添自動處理opacity的功能，也就是說我們只需要按標(biāo)準(zhǔn)設(shè)置cssText，它會自動生成相應(yīng)的濾鏡，這樣一來至少讓火狐等瀏覽器通過W3C的校檢。
var addSheet = function(){
var doc,cssCode;
if(arguments.length == 1){
doc = document;
cssCode = arguments[0]
}else if(arguments.length == 2){
doc = arguments[0];
cssCode = arguments[1];
}else{
alert("addSheet函數(shù)最多接受兩個(gè)參數(shù)!");
}
if(!+"\v1"){//新增功能，用戶只需輸入W3C的透明樣式，它會自動轉(zhuǎn)換成IE的透明濾鏡
var t = cssCode.match(/opacity:(\d?\.\d+);/);
if(t!= null){
cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+");");
}
}
cssCode = cssCode + "\n";//增加末尾的換行符，方便在firebug下的查看。
var headElement = doc.getElementsByTagName("head")[0];
var styleElements = headElement.getElementsByTagName("style");
if(styleElements.length == 0){//如果不存在style元素則創(chuàng)建
if(doc.createStyleSheet){ //ie
doc.createStyleSheet();
}else{
var tempStyleElement = doc.createElement('style');//w3c
tempStyleElement.setAttribute("type", "text/css");
headElement.appendChild(tempStyleElement);
}
}
var styleElement = styleElements[0];
var media = styleElement.getAttribute("media");
if(media != null && !/screen/.test(media.toLowerCase()) ){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){ //ie
styleElement.styleSheet.cssText += cssCode;//添加新的內(nèi)部樣式
}else if(doc.getBoxObjectFor){
styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加樣式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}
退一步說，表現(xiàn)與結(jié)構(gòu)相分離也不止導(dǎo)入樣式表這一條路。要知道，一共有三種樣式類型，外部樣式，內(nèi)部樣式，與內(nèi)聯(lián)樣式。
* 外部樣式，就是我們上面說的那個(gè)，寫在一個(gè)獨(dú)立的CSS文件中。
* 內(nèi)部樣式，就是獨(dú)立寫在一個(gè)style標(biāo)簽中，通常是放在head標(biāo)簽中，我最后提供的函數(shù)生成的樣式就是內(nèi)部樣式。
* 內(nèi)聯(lián)樣式，就是寫在元素的style屬性中的樣式。
新添加的接口主要集中在外部樣式中——之所以說接口，因?yàn)橄鄳?yīng)的實(shí)現(xiàn)是由瀏覽器方提供的，像IE6那樣傲慢的家伙，從來無視它們的存在。
在W3C的模型中，type為"text/css"的link標(biāo)簽與style標(biāo)簽都是代表一個(gè)CSSStyleSheet對象，我們可以通過 document.styleSheets 獲得當(dāng)前頁面中所有的CSSStyleSheet對象，不過這是一個(gè)集合，非單純的數(shù)組。每一個(gè)CSSStyleSheet對象擁有如下屬性，
* type：永遠(yuǎn)返回“text/css”字符串。
* disabled：和input的disabled的作用相同，默認(rèn)是false。
* href：返回URL，如果是style標(biāo)簽為null。
* title：返回其title的值，title與普通元素的title無異，隨你寫什么。
* media：IE與火狐返回的東西并不一致，不太好說。media是用來規(guī)定它擁有的樣式規(guī)則對什么設(shè)備有效，默認(rèn)是所有。
* ownerRule：返回一個(gè)只讀的CSSRule對象，如果樣式表是用@import引入的話。
* cssRules： 返回一個(gè)只讀的樣式規(guī)則對象（CSSStyleRule object）的集合。
樣式規(guī)則對象(CSSStyleRule object)，是W3C為了對樣式進(jìn)行更細(xì)致的設(shè)定而搞出來的，如下面這個(gè)東西就是對應(yīng)一個(gè)樣式規(guī)則對象:
復(fù)制代碼 代碼如下:
button[type] {
padding:4px 10px 4px 7px;
line-height:17px;
}
樣式規(guī)則對象擁有如下幾個(gè)主要屬性：type,cssText,parentStyleSheet，parentRule。
type有點(diǎn)類似節(jié)點(diǎn)的nodeType，對樣式規(guī)則進(jìn)行細(xì)分，它是用一個(gè)整數(shù)來表示其類型。具體情況如下
* 0: CSSRule.UNKNOWN_RULE
* 1: CSSRule.STYLE_RULE (定義一個(gè)CSSStyleRule對象)
* 2: CSSRule.CHARSET_RULE (定義一個(gè)CSSCharsetRule對象，用于設(shè)定當(dāng)前樣式表的字符集，默認(rèn)與當(dāng)前網(wǎng)頁相同)
* 3: CSSRule.IMPORT_RULE (定義一個(gè)CSSImportRule對象，就是用@import引入其他的樣式表)
* 4: CSSRule.MEDIA_RULE (定義一個(gè)CSSMediaRule對象，用于設(shè)定此樣式是用于顯示器，打印機(jī)還是投影機(jī)等等)
* 5: CSSRule.FONT_FACE_RULE (定義一個(gè)CSSFontFaceRule對象，CSS3的@font-face)
* 6: CSSRule.PAGE_RULE (定義一個(gè)CSSPageRule對象)
cssText不用多說，一個(gè)非常有用的屬性，直接把字符串轉(zhuǎn)換成樣式規(guī)則，無視各瀏覽器樣式屬性的差異，如cssFloat 和styleFloat。
parentStyleSheet和parentRule都是針對@import來說的。不過，@import在IE下有問題，我基本不用它。
還有幾個(gè)生不逢時(shí)的方法：
* nsertRule(rule,index): 添加一條樣式規(guī)則。
* deleteRule(index): 移除一條樣式規(guī)則。
* getPropertyValue(propertyName) 獲取元素相應(yīng)樣式屬性的值。如我們獲得一個(gè)樣式規(guī)則對象，可以利用CSSStyleRuleObject. getPropertyValue("color")獲得其字體顏色的設(shè)置。與普通的el.style.color的方法相比，其效率相當(dāng)高，因?yàn)?el.style.color獲取的是內(nèi)聯(lián)樣式，像IE那樣的怪胎，如果你的元素沒有設(shè)置style屬性，根本無法得到準(zhǔn)備的值，可能為空，可能是 inhert……可能還有兼容問題，而且這內(nèi)聯(lián)屬性不一定是最終應(yīng)用于元素的樣式，IE只有調(diào)用不那么廢物的 el.currentStyle[prop]，其他瀏覽器就調(diào)用相當(dāng)爭氣但有點(diǎn)麻煩的document. defaultView. getComputedStyle(el, "")[prop]。
* removeProperty(propertyName) 移除元素相應(yīng)樣式屬性。
* setProperty(propertyName,value,priority)設(shè)定元素添加一個(gè)樣式，還能指定優(yōu)先級。
我們可以弄一個(gè)設(shè)定樣式的函數(shù)出來：
復(fù)制代碼 代碼如下:
var hyphenize =function(name){
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
}
var camelize = function(name){
return name.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
}
var setStyle = function(el, styles) {
for (var property in styles) {
if(!styles.hasOwnProperty(property)) continue;
if(el.style.setProperty) {
//必須是連字符風(fēng)格，el.style.setProperty('background-color','red',null);
el.style.setProperty(hyphenize(property),styles[property],null);
} else {
//必須是駝峰風(fēng)格，如el.style.paddingLeft = "2em"
el.style[camelize(property)] = styles[property]
}
}
return true;
}
使用方法：
復(fù)制代碼 代碼如下:
setStyle(div,{
'left':0,
'top':0,
'line-height':'2em',
'padding-right':'4px'
});
不過我非常不喜歡這方法，生成的是內(nèi)聯(lián)樣式，它還得特殊處理float與opacity。在IE7的內(nèi)聯(lián)樣式中，濾鏡還有一個(gè)Bug，一定要讓其得到hasLayout，要不濾鏡就不會生效(我們可以通過el.currentStyle.hasLayout查看其狀況)。因此，如其一個(gè)個(gè)設(shè)置，不如用cssText一網(wǎng)打盡。
最后附上我的加強(qiáng)版addSheet方法。它增添自動處理opacity的功能，也就是說我們只需要按標(biāo)準(zhǔn)設(shè)置cssText，它會自動生成相應(yīng)的濾鏡，這樣一來至少讓火狐等瀏覽器通過W3C的校檢。
復(fù)制代碼 代碼如下:
var addSheet = function(){
var doc,cssCode;
if(arguments.length == 1){
doc = document;
cssCode = arguments[0]
}else if(arguments.length == 2){
doc = arguments[0];
cssCode = arguments[1];
}else{
alert("addSheet函數(shù)最多接受兩個(gè)參數(shù)!");
}
if(!+"\v1"){//新增功能，用戶只需輸入W3C的透明樣式，它會自動轉(zhuǎn)換成IE的透明濾鏡
var t = cssCode.match(/opacity:(\d?\.\d+);/);
if(t!= null){
cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+");");
}
}
cssCode = cssCode + "\n";//增加末尾的換行符，方便在firebug下的查看。
var headElement = doc.getElementsByTagName("head")[0];
var styleElements = headElement.getElementsByTagName("style");
if(styleElements.length == 0){//如果不存在style元素則創(chuàng)建
if(doc.createStyleSheet){ //ie
doc.createStyleSheet();
}else{
var tempStyleElement = doc.createElement('style');//w3c
tempStyleElement.setAttribute("type", "text/css");
headElement.appendChild(tempStyleElement);
}
}
var styleElement = styleElements[0];
var media = styleElement.getAttribute("media");
if(media != null && !/screen/.test(media.toLowerCase()) ){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){ //ie
styleElement.styleSheet.cssText += cssCode;//添加新的內(nèi)部樣式
}else if(doc.getBoxObjectFor){
styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加樣式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}
相關(guān)文章
div上加了onclick事件，里面又有超鏈a，點(diǎn)超鏈的時(shí)候能不觸發(fā)div 的事件嗎？2007-12-12
本文整理了一些常用的web打印及局部打印的方法以備不時(shí)之需，感興趣的朋友可以學(xué)習(xí)下2013-05-05
javascript定義變量時(shí)帶var與不帶var的區(qū)別分析
這篇文章主要介紹了javascript定義變量時(shí)帶var與不帶var的區(qū)別,以一個(gè)簡單實(shí)例分析了變量定義時(shí)帶var與不帶var的執(zhí)行原理及用法區(qū)別,需要的朋友可以參考下2015-01-01
Attribute是屬性的意思，文章僅對部分兼容IE和FF的Attribute相關(guān)的介紹。具體內(nèi)容詳情大家參考下本文2017-04-04
原生javascript實(shí)現(xiàn)addClass,removeClass,hasClass函數(shù)
這篇文章主要介紹了原生javascript實(shí)現(xiàn)addClass,removeClass,hasClass函數(shù)的相關(guān)代碼，有需要的小伙伴可以參考下2016-02-02
理解Javascript_06_理解對象的創(chuàng)建過程
在《理解Javascript_05_原型繼承原理》一文中已經(jīng)詳細(xì)的講解了原型鏈的實(shí)現(xiàn)原理，大家都知道原型鏈?zhǔn)腔趯ο髣?chuàng)建的（沒有對象,哪來原型），那么今天就來解析一下對象的創(chuàng)建過程。2010-10-10
javascript為下拉列表動態(tài)添加數(shù)據(jù)項(xiàng)
這篇文章主要介紹了javascript如何為下拉列表動態(tài)添加數(shù)據(jù)項(xiàng),需要的朋友可以參考下2014-05-05
Javascript BOM學(xué)習(xí)小結(jié)(六)
BOM：BrowserObjectModel,瀏覽器對象模型，提供JS中對瀏覽器的各種操作的對象，是JS應(yīng)用中唯一沒有相關(guān)標(biāo)準(zhǔn)的部分，這事BOM經(jīng)常出現(xiàn)問題的所在，主要用于處理瀏覽器窗口與框架，瀏覽器特有的JS擴(kuò)展也被默認(rèn)為BOM的一部分，而各瀏覽器之間的公有對象就成了默認(rèn)的標(biāo)準(zhǔn)2015-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript如何實(shí)現(xiàn)LRU緩存淘汰算法
LRU（Least Recently Used）緩存淘汰算法是一種常見的緩存淘汰策略，它的核心思想是優(yōu)先淘汰最近最少使用的緩存數(shù)據(jù)，以保證緩存中的數(shù)據(jù)始終是最熱門的。本文主要介紹了一些關(guān)于如何實(shí)現(xiàn)LRU緩存淘汰算法的方法，感興趣的小伙伴可以參考一下2023-04-04