首頁 > web前端 > js教程 > 原生javascript取得各種CSS樣式屬性的方法實例總結

原生javascript取得各種CSS樣式屬性的方法實例總結

伊谢尔伦
發布: 2017-07-19 17:23:15
原創
1531 人瀏覽過

大家最熟悉的原生js操作樣式的方法非DOM中的Style物件莫屬了,但是這個方法只能取得和修改html文件中的內聯樣式,無法操作非內聯樣式(內部樣式和外部樣式表)。

取得樣式

#1.dom style

# #這個方法只能取得內聯樣式:


var text = document.getElementById('text');
var textColor = text.style.color;

// 得到textColor的值为 '#000'
登入後複製

2. currentStyle
##這個方法只適用於IE瀏覽器,在形式上與

element.style

相近,區別在於正如currentStyle其名——目前的樣式(css加載後的樣式),返回的是元素當前最終的CSS屬性值,包括了內部style標籤裡的樣式和外部引入的css檔案。 用法:元素.currentStyle.屬性

例如我們要取得id為box的width:


var boxWidth = document.getElementById('box').currentStyle.width;

// 得到boxWidth的值为 '200px'
登入後複製

#3. getComputedStyle


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];
 }
 
}
登入後複製

接著呼叫這個函數來取得box的寬度:

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。

設定樣式

#1. dom style


這個不用說了吧,例如把元素的背景顏色改為紅色:

var el = document.getElementById('box');
el.style.backgroundColor = 'red';
登入後複製

2. cssText屬性


cssText的本質就是設定HTML 元素的style 屬性值。它是一組樣式屬性及其值的文字表示。這個文字格式化為一個 CSS 樣式表,去掉了包圍屬性和值的元素選擇器的花括號。

它的用法和innerHTML類似:

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

#

以上是原生javascript取得各種CSS樣式屬性的方法實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板