js獲取css樣式,js獲取css樣式

本文目錄一覽：

• 1、原生JS獲取及設置CSS樣式-1.行內樣式
• 2、解析js如何獲取css樣式
• 3、JS中如何獲取CSS屬性

原生JS獲取及設置CSS樣式-1.行內樣式

面試中，應該會經常被問到樣式的寫法以及如何使用原生JS獲取及操作樣式的問題吧，讓我給大家總結一下~

HTML + 行內樣式

JS

嘿嘿~

解析js如何獲取css樣式

一、獲取內聯樣式

div

id

=”myDiv”

style=”width:100px;height:100px;background-color:red;

border:1px

solid

black;”/div

script

var

myDiv

=

document.getElementById(“myDiv”);

alert(myDiv.style.width);//100px

alert(myDiv.style[‘height’]);//100px

var

style=myDiv.style;

alert(style.backgroundColor);//red

myDiv.style.backgroundColor=’green’;//myDiv背景色變為綠色

/script

在這種情況下，獲取和設置樣式只靠style屬性就可以，因為element.style屬性返回的是類似數組的一組樣式屬性及對應值，因此訪問具體樣式的時候可以採取兩種方式即「ele.style.屬性名稱」和「ele.style[‘屬性名稱’]」。但是，要注意的是，針對css樣式里background-color;margin-left之類的短杠相接的屬性名稱，在使用style屬性獲取設置樣式的時候名稱要改為駝峰式，如ele.style.backgroundColor.

二、因為第一種方法，即使用style屬性只能獲取到內聯樣式。但是，實際情況是文檔在現在都基本遵循分離思想，樣式基本都是外部鏈接，所以三種樣式都要考慮到的，這時就要使用其他方法進行獲取，而在這種情況下進行樣式獲取時，不同的瀏覽器又有不同的處理方式（主要是ie和非ie），因此根據瀏覽器可以分為兩種方式：

（2.1）非ie瀏覽器中，使用document.defaultView對象的getComputedStyle(ele，null/偽類)方法，該方法接受兩個參數，第一個為要考察的元素，第二個則要根據情況，如果只是考察元素本身則為null，如果要

考察偽類，則為響應的偽類。該方法獲取到的為元素應用的最終樣式組合，同樣是類似數組的一個實例。

（2.2）在ie瀏覽器中，對getComputedStyle()方法不支持，但是針對每個標籤元素都有一個近似於style屬性的currentStyle的屬性，且用法和style用法相同。只不過獲取到的樣式範圍不一樣。currenStyle獲取到的和getComputedStyle（）方法相接近。

為了在處理時達到兼容，可以根據這兩種不同的處理方式創建一個函數來達到兼容目的，使得不管在那種瀏覽器中，都可以成功獲取樣式。如下所示：

style

type=”text/css”

#myDiv

{

background-color:blue;

width:100px;

height:200px;

}

/style

div

id

=”myDiv”

style=”background-color:red;

border:1px

solid

black;”/div

script

var

myDiv

=

document.getElementById(“myDiv”);

var

finalStyle

=

myDiv.currentStyle

?

myDiv.currentStyle

:

document.defaultView.getComputedStyle(myDiv,

null);/*利用判斷是否支持currentStyle（是否為ie）

來通過不同方法獲取style*/

alert(finalStyle.backgroundColor);

//”red”

alert(finalStyle.width);

//”100px”

alert(finalStyle.height);

//”200px”

/script

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

JS中如何獲取CSS屬性

obj.style方法，這個方法只能JS只能獲取寫在html標籤中的寫在style屬性中的值（style=」…」），看下面代碼

XML/HTML代碼

!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「「

html xmlns=」「

head

meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″ /

titleJS獲取CSS屬性值/title

style type=」text/css」

!–

.ss{color:#cdcdcd;}

–

/style

/head

body

div id=」css88″ class=」ss」 style=」width:200px; height:200px; background:#333333″JS獲取CSS屬性值/div

script type=」text/javascript」

alert(document.getElementById(「css88」).style.width);//200px

alert(document.getElementById(「css88」).style.color);//空白

/script

/body

/html

上面這個例子對id為」css88″的div設置了2種煩事的樣式，包括style和外部樣式class。

從alert出來的信息可以看到，document.getElementById(「css88」).style方法獲取不到class為ss的屬性和值。

IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。

另外一個方法是：

XML/HTML代碼

!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「「

html xmlns=」「

head

meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″ /

titleS獲取CSS屬性值/title

style type=」text/css」

!–

.ss{background:blue; color:#cdcdcd; width:200px}

–

/style

/head

body

p id=」qq」 class=」ss」 sdf/p

script type=」text/javascript」

function GetCurrentStyle (obj, prop) {

if (obj.currentStyle) {

return obj.currentStyle[prop];

}

else if (window.getComputedStyle) {

propprop = prop.replace (/([A-Z])/g, 「-$1」);

propprop = prop.toLowerCase ();

return document.defaultView.getComputedStyle (obj,null)[prop];

}

return null;

}

var dd=document.getElementById(「qq」);

alert(GetCurrentStyle(dd,」width」));

/script

/body

/html

當然，如果您是引用外部的css文件同樣適用。

另：可以將上面的方法簡化為

JavaScript代碼

function getDefaultStyle(obj,attribute){ // 返回最終樣式函數，兼容IE和DOM，設置參數：元素對象、樣式特性

return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];

}