javascript快速入門18--樣式

水之原發表於2013-12-01
JavaScript

修改元素外觀方式

修改元素外觀主要有下面3種方法：修改ID，修改className,修改元素的style屬性

修改ID？會造成多麼混亂的結果可想而知！

修改className確實是非常好的方法，我們甚至可以利用CSS層疊，通過修改body的className來修改整個頁面的風格！前提是我們必須寫特定的CSS！

    //CSS程式碼
    body.redStyle {
        border:2px solid red;
    }
    body.redStyle * {
        color:red;
    }
    body.blueStyle {
        border:2px solid blue;
    }
    body.blueStyle * {
        color:blue;
    }
    //JS程式碼
    document.body.className="redStyle";//切換為“紅粉佳人”風格
    document.body.className="blueStyle";//切換為“藍調情懷”風格

 

但修改className也並非那麼容易，不要忘了className可以有多個的！所以不管新增，測試還是移除元素的className，都要小心，下面的函式可以造福人類！

    function hasClassName(obj,cn) {
        return (new RegExp("\\b"+cn+"\\b")).test(obj.className);
    }
    function addClassName(obj,cn) {
        return obj.className += " " + cn;//第一次新增時，會多出一個前置空格
        //但不用擔心，瀏覽會自動將其清除掉
    }
    function delClassName(obj,cn) {
        return obj.className = obj.className.replace(new RegExp("\\b"+cn+"\\b"),"");
        //同樣，多個className之間的多個空格也會被視為一個
    }

 

元素的style屬性?見下面

Style屬性

可以在元素的style屬性上應用CSS規則，並且style屬性上的規則優先順序要高於樣式表中的規則，因此，通過修改元素的style屬性來修改元素的外觀可能是最方便並且是最有效的方法了。

同其它HTML屬性不同的是，元素的style屬性是一個物件，CSS的屬性名和屬性值分別對映到了style物件的屬性名和屬性值，如定義物件的style="color:red;"，在JavaScript中訪問時就可以這樣訪問：obj.style.color。但style屬性也有一些需要注意的地方，比如CSS屬性名中包含一些不能用作變數名的非法字元時，在JavaScript中訪問時，會自動轉換成駝峰命名式。

    var oDiv=document.getElementById("oDiv");
    alert(oDiv.style.fontSize);//自動駝峰命名
    //如果要直接獲取style屬性中的所有CSS文字，則可以使用style物件的cssText屬性
    alert(oDiv.style.cssText);
    //對於CSS簡寫方式，各個瀏覽器返回結果出現分歧
    alert(oDiv.style.border);
    //需要分別獲取值
    alert(oDiv.style.borderLeftColor);//但會很麻煩
    //對於顏色，火狐總返回RGB表現形式,但設定時可以使用十六進位制形式
    alert(oDiv.style.backgroundColor);//火狐會返回rgb(x,y,z)

 

但是元素的style屬性僅僅提供了內聯樣式所定義的CSS規則，而不能反映CSS樣式表中的規則

    //CSS
    #oDiv {
        color:blue;
    }
    //HTML
    <div id="oDiv">Div</div>
    //JS
    alert(document.getElementById("oDiv").style.color);//空的

 

另外，要注意的是，修改元素的style屬性時，必須將一個字串賦給style物件的屬性！

    oDiv.style.width = 120;//錯誤的，雖然在IE下有效果
    oDiv.style.fontSize="120%";//正確

 

獲取實際應用在元素上的樣式

對於獲取元素的實際的CSS層疊最後的樣式，IE與W3C DOM存在分歧：IE給物件提供了一個currentStyle屬性，它的使用方式很像元素的style屬性，但它返回的值是元素的實際樣式，而不管樣式是內聯的還是在外部樣式表中定義的！ W3C DOM則使用一個全域性方法getComputedStyle，它的第一個引數為要檢測的物件，第二個引數為null（在未來實現），將返回一個與元素的style也很相似的物件，但一是返回的物件是元素實際樣式規則，二是它對於數值型屬性總是返回畫素值

    alert(oDiv.currentStyle.width);//IE，currentStyle保留原來定義在CSS中的單位
    alert(window.getComputedStyle(oDiv,null).width);//W3C DOM,並且總是返回計算後的畫素值
    //另外，兩種方式都不能獲取那些CSS簡寫方式定義的，下面兩個都會輸出空
    alert(oDiv.currentStyle.background);
    alert(getComputedStyle(oDiv,null).border);

 

Cross-Browser 獲取元素實際樣式的方式

    function getStyle(obj,cn) {
        if (window.getComputedStyle) {//W3C DOM
            return window.getComputedStyle(obj,null)[cn];
        } else if (obj.currentStyle) {//IE
            return obj.currentStyle[cn];
        }
        return "";
    }

 

樣式表

DOM也提供了訪問外部樣式表的方法，當然，也有無奈的相容性問題！

向頁面新增樣式表

    //使用新增節點的方法
    var lnk = document.createElement("link");
    lnk.type="text/css";
    lnk.rel="styleSheet";
    lnk.href="test.css";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(lnk);
    //在IE下不能使用innerHTML向head中新增HTML程式碼的方式
    //另一種方法就是使用document.write
    document.write("");

 

訪問樣式表

也許修改個別元素的樣式是十分簡單的，但更改某條樣式表規則（可以使所有相關元素都發生變化），則十分麻煩，並且這種技術只有Win平臺上的IE與火狐才支援！但是訪問樣式表中的CSS規則仍然是有辦法的！

    alert(document.styleSheets);//document物件的styleSheets屬性是一個包含了所有的樣式表的偽陣列
    var sheets = docuemtn.styleSheets;
    alert(sheets.length);//length報告了樣式表的個數
    //style標籤出現一次或使用link標籤鏈入CSS一次就算作一個樣式表物件
    var sheet1 = sheets[0];//可以使用下標來訪問

 

樣式表物件的屬性

  • type，一般都為text/css
  • href，link標籤為其href屬性，而style標籤則為空
  • id，所屬標籤的ID
  • disabled，樣式表是否啟用，啟用時為false
  • cssText(僅IE)，樣式表中規則的文字形式
  • owningElement(IE)，ownerNode(W3C DOM)，返回引入樣式表的那個標籤
  • rules(IE),cssRules(W3C)，對應樣式表裡所有規則的集合

Rule物件屬性

  • selectorText ，選擇符
  • style，與元素上的 style屬性十分相似，可以讀取和設定CSS規則 ，並且有cssText屬性

修改樣式表

通過styleSheets訪問到的樣式表物件具有一些方法來修改其中的樣式表規則，但這些方法在各個瀏覽器中不一樣。火狐支援W3C的insertRule()和deleteRule()方法。IE使用專有的addRule()和removeRule()方法。而其它瀏覽器則不支援任何一個。

    var sheet = document.styleSheets[0];
    sheet.insertRule("body {color:blue;}",1);//W3C方法,第一個引數為CSS文字,第二個引數為位置,從0開始計數
    sheet.addRule("body","color:blue;",1);//IE方法,第一個引數為CSS選擇符,第二個為CSS內容,第三個為位置
    //而要刪除某條規則，則只能通過下標
    sheet.removeRule(1);//IE
    sheet.deleteRule(1);//W3C

 

Cross-Browser 總結函式

    function addCSS(sheet,selectorText,declarations,index) {
        if (sheet.insertRule) {
            sheet.insertRule(selectorText+" {"+declarations+"}",index);
        } else if (sheet.addRule) {
            sheet.addRule(selectorText,declarations,index);
        }
    }
    function delCSS(sheet,index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else {
            sheet.removeRule(index);
        }
    }

 

相關文章