Javascript獲取css渲染樣式值技巧

一直忙沒更新,總結下近期開發中使用的關於提取css渲染樹樣式的方法

提取渲染樣式

ie從domelement.currentstyle物件中提取即時計算的樣式

標準瀏覽器使用window.getcomputedstyle方法獲取

ie下還有個runtimestyle物件,可以應用樣式又不改變dom的style屬性,

理解為runtimestyle用於執行時寫入樣式,currentstyle用於為讀取渲染後的樣式

* jquery的css()方法已經處理了二者的相容,可以通過css()方法提取渲染後的樣式值,但在實際應用還會遇到一些問題,下面說一說解決這些問題的方法

偽類樣式獲得方法

標準瀏覽器通過getcomputedstyle方法可以獲得偽類style物件,如下方法

window.getcomputedstyle(domelement,':after);

jquery css()方法中後邊引數都是null,所以無法去取偽類的樣式.

ie不支援此方發,只能通過,遍歷樣式表物件,匹配選擇器進行查詢,這種方式需要css寫的比較標準及約定好選擇器特徵才能準確有效的找到所需樣式

...

var more=$('span.morelink');
if(window.getcomputedstyle)else
//ie中從stylesheets中獲取
function getstylesheet(selector)
}}	}

在ie中通過獲得渲染樣式 color 或 backgroundcolor 得到的值一般是#ffffff這種16進製制的形式

而在ff等標準瀏覽器得到的是rgb(255, 0, 0)這種形式,可以用以下方法都轉換成16進製制形式.

在chrome瀏覽器中透明(transparent)會得到rgba(0, 0, 0, 0),在方法中也處理了.

function rgb2hex(rgb) 

return "#" + hex(m[1]) + hex(m[2]) + hex(m[3]);
}

在ie中渲染樣式中不能獲得background-position,對應的樣式被拆成background-position-x和background-position-y

通過以下方法可獲得

//以下使用jquery css()方法獲得渲染樣式

function getbackgroundposition(t)
return v;
}

如樣式設定 background-position:20% 10px ,ie中只能獲得對應的px值.(寬度、高度、top、left等值也是如此)

如需獲得百分比值,可以在樣式表物件中遍歷獲得.(同上使用getstylesheet方法)

2012-5-11更新

從當前頁面所有樣式中(包括import引用的css)查詢指定檔案中與引數匹配的選擇器的樣式

selectorregexp--篩選選擇器的正規表示式

cssfilename--css檔名(可選引數)

專案中使用直接粘過來

ex.fn.getstyle4sheet=function(selectorregexp,cssfilename)

trycatch(e){}
}		var style=styles.length?{}:null;
for(var i=styles.length-1;i>=0;i--)
}		return style;
function getimports(rs)
}}}

javascript獲取css盒子模型的一些值

首先無法用style屬性來獲取任意元素的的css資訊.style屬性只有顯式設定後才能獲取值.有效獲取的方法如下 var id document.getelementbyid id 盒子外層坐上頂點的絕對座標.相當於margin id.offsetleft id.offsettop 盒子外層寬度與高...

如何javascript獲取css中的樣式

obj.style.height只能獲取行間樣式,但是我們要怎麼獲取寫在css檔案中的樣式呢?首先我們要用乙個新的方法currentstyle.這個方法由current和style兩個單詞組成意思是 目前的樣式.也就是載入css檔案後取出來的樣式.currentstyle的用法是 元素.curren...

javascript獲取型別

1 使用typeof函式可以用於識別運算數型別的字串，可以返回如下型別 number,string,boolenan,object,function,undefined.2 當使用typeof函式檢測null值時，返回的時object，則需要 return o null null typeof o ...