# javascript快速入門18--樣式 ## 修改元素外觀方式 修改元素外觀主要有下面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); } } ```