關於js讀寫各瀏覽器私有css屬性的信息

本文目錄一覽：

• 1、原生JS中如何獲取CSS屬性中的值
• 2、怎樣用JS判斷各瀏覽器調用各自的css文件？
• 3、怎麼用js獲取到css3屬性的值 比如獲取transform的值
• 4、如何用JS來改變CSS屬性？

原生JS中如何獲取CSS屬性中的值

您好，使用原生js獲取

一、getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值，

返回的是一個CSS樣式聲明對象 ， 只讀， 此方法支持Firefox瀏覽器;

語法：var style=window.getComputedStyle(「元素」，「偽類」);第一個參數是必須的，第二個為可選的。

二、currentStyle 是一款可以兼容IE瀏覽器的屬性返回的是當前所有最終使用的CSS屬性值，

利用element.CurrentStyle.attribute可獲取

其與getComputedStyle區別：1、 currentStyle不支持偽類樣式獲取；

2、currentStyle不支持現代瀏覽器，支持IE

原生JS中如何獲取CSS屬性中的值

怎樣用JS判斷各瀏覽器調用各自的css文件？

當然可以了，

在頁面里直接這樣寫就行

!–[if IE]link type=”text/css” rel=”stylesheet” href=”style_ie.css” /![endif]–

具體的文章如下：

條件注釋只能在windows Internet Explorer(以下簡稱IE)下使用，因此我們可以通過條件注釋來為IE添加特別的指令。

通俗點，條件注釋就是一些if判斷，但這些判斷不是在腳本里執行的，而是直接在html代碼里執行的，比如：

!–[if IE]

這裡是正常的html代碼

![endif]–

1，條件注釋的基本結構和HTML的注釋(!– –)是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。

2，IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋里的內容。

3，條件注釋使用的是HTML的注釋結構，因此他們只能使用在HTML文件里，而不能在CSS文件中使用。

可使用如下代碼檢測當前IE瀏覽器的版本（注意：在非IE瀏覽器中是看不到效果的）

!–[if IE]

h1您正在使用IE瀏覽器/h1

!–[if IE 5]

h2版本 5/h2

![endif]–

!–[if IE 5.0]

h2版本 5.0/h2

![endif]–

!–[if IE 5.5]

h2版本 5.5/h2

![endif]–

!–[if IE 6]

h2版本 6/h2

![endif]–

!–[if IE 7]

h2版本 7/h2

![endif]–

![endif]–

那如果當前的瀏覽器是IE，但版本比IE5還低，該怎麼辦呢，可以使用!–[if ls IE 5]，當然，根據條件注釋只能在IE5+的環境之下，所以!–[if ls IE 5]根本不會被執行。

lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。

lt ：就是Less than的簡寫，也就是小於的意思。

gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。

gt ：就是Greater than的簡寫，也就是大於的意思。

! ：就是不等於的意思，跟javascript里的不等於判斷符相同

Conditional comments屬於CSS hack? 條件判斷屬於CSS hack嗎？

嚴格地說是屬於CSS hack。因為就好象其他真正的css hack一樣，它使得我們可以給一些瀏覽器賦予特殊的樣式，再則它不依賴於某個瀏覽器的BUG來控制另外一個瀏覽器（的樣式）。除此之外，條件判斷還能用來做一些超出CSS HACK範圍的事情(雖然這種情況很少發生)。

因為條件判斷不依賴於某個瀏覽器的hack,而是一個經過深思熟慮的特色功能，所以我相信它是可以被放心地使用的。當然，其他瀏覽器也有可能支持條件判斷（到目前為止還沒有），但是看起來，他們應該不會使用如!–[if IE]這樣的語法。

應該如何應用條件注釋

本文一開始就說明了，因為IE各版本的瀏覽器對我們製作的WEB標準的頁面解釋不一樣，具體就是對CSS的解釋不同，我們為了兼容這些，可運用條件注釋來各自定義，最終達到兼容的目的。比如：

!– 默認先調用css.css樣式表 —

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

!–[if IE 7]

!– 如果IE瀏覽器版是7,調用ie7.css樣式表 —

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

![endif]–

!–[if lte IE 6]

!– 如果IE瀏覽器版本小於等於6,調用ie.css樣式表 —

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

![endif]–

這其中就區分了IE7和IE6向下的瀏覽器對CSS的執行，達到兼容的目的。同時，首行默認的css.css還能與其他非IE瀏覽器實現兼容。

注意：默認的CSS樣式應該位於HTML文檔的首行，進行條件注釋判斷的所有內容必須位於該默認樣式之後。

比如如下代碼，在IE瀏覽器下執行顯示為紅色，而在非IE瀏覽器下顯示為黑色。如果把條件注釋判斷放在首行，則不能實現。該例題很能說明網頁對IE瀏覽器和非IE瀏覽器間的兼容性問題解決。

style type=”text/css”

body{

background-color: #000;

}

/style

!–[if IE]

style type=”text/css”

body{

background-color: #F00;

}

/style

![endif]–

同時，有人會試圖使用!–[if !IE]來定義非IE瀏覽器下的狀況，但注意：條件注釋只有在IE瀏覽器下才能執行，這個代碼在非IE瀏覽下非單不是執行該條件下的定義，而是當做注釋視而不見。

正常就是默認的樣式，對IE瀏覽器需要特殊處理的，才進行條件注釋。

怎麼用js獲取到css3屬性的值 比如獲取transform的值

原生JS來操作比較麻煩，每個瀏覽器操作方法都不一樣，如果是寫在style屬性里的CSS，可以這麼操作：

obj.style.transform

如果是寫在css里就要判斷瀏覽器了，比較麻煩，推薦你用jQ吧，一句搞定：

obj.css(“transform”)

如何用JS來改變CSS屬性？

通過js來改變CSS屬性，使用jQuery可以很方便的實現，像這樣：

$(“img”).css(‘border-color’,’red’);

就可以把邊框顏色都變成紅色。

這是針對此問題的測試頁面

2、這是3張圖片

img src=’;fm=11gp=0.jpg’

img src=’;fm=11gp=0.jpg’

img src=’;fm=11gp=0.jpg’

3、這是圖片的樣式，邊框默認為灰色。

img{

max-width:200px;

border-color:gray;

border-width:10px;

border-style:solid;

}

4、現在通過這幾行用到jQuery的代碼，控制圖片邊框根據滑鼠移入移出邊框變灰和變紅。

$(function(){

$(“img”).on(‘mouseover’,function(){

$(this).css(‘border-color’,’red’);

}).on(‘mouseout’,function(){

$(this).css(‘border-color’,’gray’);

});

});

5、效果如圖