js獲取css屬性方法,設置獲取css屬性

本文目錄一覽：

• 1、解析js如何獲取css樣式
• 2、js獲取某元素的class裡面的css屬性值代碼
• 3、JS使用getComputedStyle()方法獲取CSS屬性值
• 4、js如何獲取css文件內的一個屬性值
• 5、前端基本功：JS（十一）動畫封裝(CSS樣式獲取、JSON遍歷)
• 6、如何javascript獲取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

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

js獲取某元素的class裡面的css屬性值代碼

用js如何獲取div中css的

margin、padding、height、border等。你可能說可以直接用document.getElementById(“id”).style.margin獲取。但是你說的只能獲取直接在標籤中寫的style的屬性，無法獲取標籤style外的屬性（如css文件中的屬性)。而下面方法則兩者值都可以獲取。

實例效果圖如下:

js在獲取css屬性時如果標籤中無style則無法直接獲取css中的屬性，所以需要一個方法可以做到這點。

getStyle(obj,attr)

調用方法說明：obj為對像,attr為屬性名必須兼容js中的寫法(可以參考：JS可以控制樣式的名稱寫法)。

Js代碼

複製代碼

代碼如下:

function

getStyle(obj,attr){

var

ie

=

!+”\v1″;//簡單判斷ie6~8

if(attr==”backgroundPosition”){//IE6~8不兼容backgroundPosition寫法，識別backgroundPositionX/Y

if(ie){

return

obj.currentStyle.backgroundPositionX

+”

“+obj.currentStyle.backgroundPositionY;

}

}

if(obj.currentStyle){

return

obj.currentStyle[attr];

}

else{

return

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

}

}

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文件內的一個屬性值

在理解提問君的需求的前提下，並充分借鑒一樓君的成果（如果問題得到解決，請採用他的答案！），修改如下：

html 

head 

titleJS獲取CSS屬性值/title 

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

link href=”test.css” rel=”stylesheet” type=”text/css” /

script type=”text/javascript” 

  onload = function (){

  var i = document.getElementById(“css88”).style.width || css88.offsetWidth || css88.clientWidth;      

  alert(i);

  }

/script 

/head 

body  

    div id=”css88″ class=”w” JS獲取CSS屬性值/div 

/body 

/html

前端基本功：JS（十一）動畫封裝(CSS樣式獲取、JSON遍歷)

盒子 原來的位置 0 + 10 盒子現在的offsetLeft 10

|-5| = 5

這三個函數都是 數學函數

Math

比如說 console.log(Math.ceil(1.01)) 結果 是 2

console.log(Math.ceil(1.9)) 結果 2

console.log(Math.ceil(-1.3)) 結果 是 -1

比如說 console.log(Math.floor(1.01)) 結果 是 1

console.log(Math.floor(1.9)) 結果 1

console.log(Math.floor(-1.3)) 結果 是 -2

console.log(Math.round(1.01)) 結果 是 1

console.log(Math.round(1.9)) 結果 是 2

勻速動畫的原理： 盒子本身的位置 + 步長

緩動動畫的原理: 盒子本身的位置 + 步長 (不斷變化的)

( 缺陷：只能水平方向！隨後的「封裝運動框架單個屬性會進一步改進」 )

我們訪問得到css 屬性，比較常用的有兩種：

點語法可以得到 width 屬性 和 top屬性 ** 帶有單位的 。 100px

但是這個語法有非常大的 缺陷**， 不變的。

後面的width 和 top 沒有辦法傳遞參數的。

var w = width;

box.style.w

最大的優點 ： 可以給屬性傳遞參數

我們想要獲得css 的樣式， box.style.left 和 box.style.backgorundColor

但是它只能得到 行內的樣式。

但是我們工作最多用的是 內嵌式 或者 外鏈式 。

怎麼辦？

核心： 我們怎麼才能得到內嵌或者外鏈的樣式呢？

外部（使用link）和內嵌（使用style）樣式表中的樣式（ie和opera）

兩個選項是必須的， 沒有偽類 用 null 替代

我們這個元素裡面的屬性很多， left top width ===

我們想要某個屬性， 就應該 返回該屬性，所有繼續封裝 返回當前樣式的 函數。

千萬要記得 每個 的意思 ： 那是相當重要

flag在js中一般作為開關，進行判斷。

等動畫執行完畢再去執行的函數 回調函數

我們怎麼知道動畫就執行完畢了呢？

很簡單 當定時器停止了。 動畫就結束了

案例源碼：

in運算符也是一個二元運算符，但是對運算符左右兩個操作數的要求比較嚴格。in運算符要求第1個（左邊的）操作數必須是字元串類型或可以轉換為字元串類型的其他類型，而第2個（右邊的）操作數必須是數組或對象。只有第1個操作數的值是第2個操作數的屬性名，才會返回true，否則返回false

案例源碼：

鏈接：

密碼：7fv8

如何javascript獲取css中的樣式

使用css控制頁面有4種方式，分別為行內樣式(內聯樣式)、內嵌式、鏈接式、導入式。

行內樣式(內聯樣式)即寫在html標籤中的style屬性中，如div style=”width:100px;height:100px;”/div

內嵌樣式即寫在style標籤中，例如style type=”text/css”div{width:100px; height:100px}/style

鏈接式即為用link標籤引入css文件，例如link href=”test.css” type=”text/css” rel=”stylesheet” /

導入式即為用import引入css文件，例如@import url(“test.css”)

如果想用javascript獲取一個元素的樣式信息，首先想到的應該是元素的style屬性。但是元素的style屬性僅僅代表了元素的內聯樣式，如果一個元素的部分樣式信息寫在內聯樣式中，一部分寫在外部的css文件中，通過style屬性是不能獲取到元素的完整樣式信息的。因此，需要使用元素的計算樣式才獲取元素的樣式信息。