js獲取css信息（js如何獲取css樣式的值）

本文目錄一覽：

• 1、js 怎麼獲取 css ？在線等待! 謝謝！
• 2、解析js如何獲取css樣式
• 3、如何javascript獲取css中的樣式
• 4、JS使用getComputedStyle()方法獲取CSS屬性值
• 5、JS中如何獲取CSS屬性
• 6、js怎麼獲取css設置的樣式

js 怎麼獲取 css ？在線等待! 謝謝！

額,css文件和js文件都是操作html文件的，他們兩個怎麼可以互相獲取呢，在js代碼中使用”對象.style.屬性（要設置的）=”你要設置的值””而且這個屬性是css中的屬性,

解析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

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

如何javascript獲取css中的樣式

1 Javascript獲取頁面的元素的樣式常見的兩個方法是 document.getElementById(), document.querySelector(“”);方法。

2 在下面的實例中是使用Javascript來改變標籤的背景顏色，使用的是document.querySelector()方法。代碼可以直接複製到瀏覽器上面運行；document.querySelector(“#demo”).style.background = “red”;是獲取元素，使用css改變標籤的北京顏色；button onclick=”myFunction()”點我/button是點擊事件觸發，點擊之後有相應的代碼執行。

!DOCTYPE html

html

head

meta charset=”utf-8″

titlejavascript改變背景顏色/title

/head

body

p id=”demo”id=”demo” 的 p 元素/p

button onclick=”myFunction()”點我/button

script

function myFunction() {

document.querySelector(“#demo”).style.background = “red”;

}

/script

/body

/html

3  案例加載之後的頁面效果截圖 ：

4 點擊點我按鈕之後，北京顏色變為紅色的效果截圖：

JS使用getComputedStyle()方法獲取CSS屬性值

在對網頁進行調試的過程中，經常會用到js來獲取元素的CSS樣式，方法有很多很多，現在僅把我經常用的方法總結如下：

1.

obj.style：這個方法只能JS只能獲取寫在html標籤中的寫在style屬性中的值（style=」…」），而無法獲取定義在style

type=”text/css”裏面的屬性。

複製代碼

代碼如下:

span

style=”font-family:Arial;font-size:14px;”!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

/span

2.

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

方法

「DOM2級樣式」增強了document.defaultView，提供了getComputedStyle()方法。這個方法接受兩個參數：要取得計算樣式的元素和一個偽元素字符串（例如「:after」）。如果不需要偽元素信息，第二個參數可以是null。getComputerStyle()方法返回一個CSSStyleDeclaration對象，其中包含當前元素的所有計算的樣式。以下面的HTML頁面為例：

複製代碼

代碼如下:

span

style=”font-family:Arial;font-size:14px;”!DOCTYPE

html

html

head

title計算元素樣式/title

style

#myDiv

{

background-color:blue;

width:100px;

height:200px;

}

/style

body

div

id

=”myDiv”

style=”background-color:red;

border:1px

solid

black”/div

script

var

myDiv

=

document.getElementById(“myDiv”);

var

computedStyle

=

document.defaultView.getComputedStyle(myDiv,

null);

alert(computedStyle.backgroundColor);

//”red”

alert(computedStyle.width);

//”100px”

alert(computedStyle.height);

//”200px”

alert(computedStyle.border);

//在某些瀏覽器中是「1px

solid

black」

/script

/body

/head

/html/span

邊框屬性可能也不會返回樣式表中實際的border規則（Opera會返回，但其它瀏覽器不會）。存在這個差別的原因是不同瀏覽器解釋綜合屬性的方式不同，因為設置這種屬性實際上會涉及很多其他的屬性。在設置border時，實際上是設置了四個邊的邊框寬度、顏色、樣式屬性。因此，即使computedStyle.border不會在所有瀏覽器中都返回值，但computedStyle.borderLeftWidth則會返回值。

需要注意的是，即使有些瀏覽器支持這種功能，但表示值的方式可能會有所區別。例如，Firefox和Safari會返回將所有顏色轉換成RGB格式。因此，即使getComputedStyle()方法時，最好多在幾種瀏覽器中測試一下。

IE不支持getComputedStyle()方法，但它有一種類似的概念。在IE中，每個具有style屬性的元素還有一個currentStyle屬性。這個屬性是CSSStyleDeclaration的實例，包含當前元素全部計算後的樣式。取得這些樣式的方法差不多，如下：

複製代碼

代碼如下:

span

style=”font-family:Arial;font-size:14px;”var

myDiv

=

document.getElementById(“myDiv”);

var

computedStyle

=

myDiv.currentStyle;

alert(computedStyle.backgroundColor);

//”red”

alert(computedStyle.width);

//”100px”

alert(computedStyle.height);

//”200px”

alert(computedStyle.border);

//undefined/span

與DOM版本的方式一樣，IE也沒有返回border樣式，因為這是一個綜合屬性。

3.

我自己在寫測試case過程中寫的一個簡單的函數（適用於Chrome）：

複製代碼

代碼如下:

span

style=”font-family:Arial;font-size:14px;”function

getCSS(div){

return

document.defaultView.getComputedStyle(div,

null);

//return

div.currentStyle;//沒用過，IE

}/span

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];

}

js怎麼獲取css設置的樣式

用document.getElementById(『element』).style.xxx可以獲取元素的樣式信息，可是它獲取的只是DOM元素style屬性里的樣式規則，對於通過class屬性引用的外部樣式表，就拿不到我們要的信息了。

DOM標準里有個全局方法getComputedStyle，可以獲取到當前對象樣式規則信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對象的左內邊距。但是IE不支持此方法，它有自己的一個實現方式，那就是currentStyle，不同於全局方法getComputedStyle，它是作為DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對象的左內邊距了，兼容性的寫法如下：

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;