|
|
樣式分三種
外部樣式 External Style Sheet
以CSS為擴展名的文件（又稱為"超文本樣式表"文件），它的作用范圍可以是多張網頁，或整個網站，甚至不同的網站。與網頁鏈接后，才能應用。
嵌入式樣式 internal Style Sheet
包含在網頁內部的樣式設置，它的作用范圍僅限于嵌入的網頁。
內聯式樣式 inline Style
在HTML文檔中，內聯式樣式表的格式化信息直接插入所應用的網頁元素的HTML標簽中，作為其HTML標簽的屬性參數。嚴格地說，內聯樣式表稱不上表，僅僅是一條HTML標記。
當出現相同的樣式時，優先級是內聯大于嵌入式樣式, 嵌入式樣式大于外部樣式。
---------------------------------------------------------------
當js獲取這三種樣式時,style只能獲取內聯樣式，獲取不到外部樣式和嵌入式樣式,因此要用currentStyle屬性，而currentStyle在FF下不支持
下面介紹二種 兼容FF和IE和正確獲取樣式的方法
復制代碼 代碼如下:
var $=function(id){return document.getElementById(id) };
方法一
/*
* @string id
* @string styleName 樣式名
*/
function getEyeJsStyle(id,styleName){
if($(id).currentStyle){//ie
return $(id).currentStyle[styleName];
}else{ //ff
var $arr=$(id).ownerDocument.defaultView.getComputedStyle($(id), null);
return $arr[styleName];
}
}
方法二:
復制代碼 代碼如下:
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
講述一下getComputedStyle函數的用法
這個函數有兩個參數：
第一個參數為需要獲取樣式的元素對象；
第二個參數為偽元素，如:hover, :first-letter, :before等等，
如果不需要偽元素則該參數為null。
getComputedStyle()函數可以從 document.defaultView 對象中訪問到，即可以這樣調用該函數
--------------------------------------------------------------------------------------------
順便說一下runtimeStyle屬性，首頁該屬性只在IE中支持,在FF不支持
runtimeStyle 運行時的樣式！如果與style的屬性重疊，將覆蓋style的屬性！
意思就是當指定了runtimeStyle，那么當前顯示的樣式以runtimeStyle為準，如果取消了runtimeStyle，那么當前顯示樣式就恢復到currentStyle的樣式。
案例:
設置document.getElementById("eyejs").runtimeStyle.width="400px"; 那該元素的寬度就是400px,，將覆蓋style的屬性
案例分析打包下載
JavaScript技術：js正確獲取元素樣式詳解，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
