大家最熟悉的原生js操作樣式的方法非DOM中的Style物件莫屬了,但是這個方法只能取得和修改html文件中的內聯樣式,無法操作非內聯樣式(內部樣式和外部樣式表)。
取得樣式
#1.dom style
var text = document.getElementById('text'); var textColor = text.style.color; // 得到textColor的值为 '#000'
2. currentStyle
##這個方法只適用於IE瀏覽器,在形式上與
相近,區別在於正如currentStyle其名——目前的樣式(css加載後的樣式),返回的是元素當前最終的CSS屬性值,包括了內部style標籤裡的樣式和外部引入的css檔案。 用法:元素.currentStyle.屬性
例如我們要取得id為box的width:
var boxWidth = document.getElementById('box').currentStyle.width; // 得到boxWidth的值为 '200px'
getComputedStyle是一個可以取得目前元素所有最終使用的CSS屬性值。傳回的是一個CSS樣式宣告物件([object CSSStyleDeclaration]),而且是唯讀的。
在相容性上,基本支援:Chrome、Firfox、IE9、Opera、Safari
用法:getComputedStyle(元素, 偽類).屬性,第二個參數如果不是偽類就設定為null吧。
var el = document.getElementById("box"); var style = window.getComputedStyle(el , ":after");
為了適用於各大主流瀏覽器,我們來寫一個函數:
// 这个函数需要传递两个参数:元素对象和样式属性名称 function getStyle(el, styleName) { if( el.currentStyle ) { // for IE return el.currentStyle[styleName]; } else { // for peace return getComputedStyle(el, false)[styleName]; } }
var box = document.getElementById("box"); var boxWidth = getStyle(box, 'width');
getComputedStyle與style的區別?
既然都是取得樣式屬性的值,它們有啥區別呢:
getComputedStyle方法是唯讀的,只能取得樣式而不能設置,但是
element.style既能讀也能寫。
getComputedStyle方法取得的是最終應用在元素上的所有CSS屬性物件(即使沒有CSS程式碼,也會將預設的祖宗八代都顯示出來);而element.style只能取得元素style屬性中的CSS樣式。因此對於一個光禿禿的元素
,getComputedStyle方法返回物件中length屬性值(如果有)就是190+(據我測試FF:192, IE9:195, Chrome:253, 不同環境結果可能有差異),而element.style就是0。
設定樣式
這個不用說了吧,例如把元素的背景顏色改為紅色:
var el = document.getElementById('box'); el.style.backgroundColor = 'red';
cssText的本質就是設定HTML 元素的style 屬性值。它是一組樣式屬性及其值的文字表示。這個文字格式化為一個 CSS 樣式表,去掉了包圍屬性和值的元素選擇器的花括號。
它的用法和innerHTML類似:
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";#
以上是原生javascript取得各種CSS樣式屬性的方法實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!