老生常談JavaScript獲取CSS樣式的方法(兼容各瀏覽器)

更新時(shí)間：2018年09月19日 10:27:55 作者：昊晗遠(yuǎn)昂

大家都知道CSS樣式有三種類(lèi)型：行內(nèi)樣式、內(nèi)部樣式和外部樣式，這篇文章主要介紹了javaScript獲取CSS樣式的方法(兼容各瀏覽器),需要的朋友可以參考下

眾所周知，CSS樣式有三種類(lèi)型：行內(nèi)樣式、內(nèi)部樣式和外部樣式，JavaScript獲取CSS樣式時(shí)分為兩種情況：行內(nèi)樣式獲取法和非行內(nèi)樣式獲取法。

一、行內(nèi)樣式獲取相對(duì)簡(jiǎn)單，通過(guò)element.style.attr（元素.style.屬性）即可獲取，示例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript獲取CSS樣式</title>
 </head>
 <body>
   <!-- 給p標(biāo)簽設(shè)置行內(nèi)樣式并添加點(diǎn)擊事件 -->
   <p style='width: 200px;height: 100px;background: pink' onclick='show()'>博客園--開(kāi)發(fā)者的網(wǎng)上家園</p>
   <script type="text/javascript">
     function show() {
       var obj = document.getElementsByTagName('p')[0];
       alert(obj.style.width);
     }
   </script>
 </body>
 </html>

運(yùn)行：

通過(guò)element.style.attr即可獲取行內(nèi)樣式屬性值，也可設(shè)置屬性值，形式如：obj.style.width = 300 + 'px';

二‘、非行內(nèi)樣式獲取法，因?yàn)g覽器的不同又分為兩種，即基于IE瀏覽器的和非IE瀏覽器的如谷歌火狐等。

1、基于IE瀏覽器的非行內(nèi)獲取法：通過(guò) element.currentStyle['attr']

IE運(yùn)行結(jié)果：

2、基于非IE如火狐谷歌等非行內(nèi)獲取法：通過(guò) getComputedStyle(element.null/偽類(lèi))[attr]

火狐運(yùn)行結(jié)果：

二者兼容定法：

總結(jié)：以上就是JavaScript獲取CSS樣式的方法，其中獲取非行內(nèi)樣式兼容IE和非IE可通過(guò)封裝一個(gè)函數(shù)，實(shí)現(xiàn)多次調(diào)用，

切記：非行內(nèi)樣式獲取法，只能獲取不能設(shè)置。

總結(jié)

以上所述是小編給大家介紹的老生常談JavaScript獲取CSS樣式的方法(兼容各瀏覽器)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚功能
這篇文章主要為大家詳細(xì)介紹了js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
input框中的name和id的區(qū)別
這篇文章主要介紹了input框中的name和id的區(qū)別介紹，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2016-11-11
JavaScript獲取XML數(shù)據(jù)附示例截圖
這篇文章主要介紹了JavaScript獲取XML數(shù)據(jù)的方法,需要的朋友可以參考下
2014-03-03
javascript中Date format(js日期格式化)方法小結(jié)
這篇文章主要介紹了javascript中Date format,即js日期格式化的方法.實(shí)例總結(jié)了三種常見(jiàn)的JavaScript日期格式化技巧,需要的朋友可以參考下
2015-12-12
javascript實(shí)現(xiàn)拖動(dòng)元素交換位置
這篇文章主要介紹了javascript實(shí)現(xiàn)拖動(dòng)元素交換位置的方法，類(lèi)似拼圖游戲拖拽卡片效果，感興趣的小伙伴們可以參考一下
2015-11-11
js實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
JS簡(jiǎn)單操作select和dropdownlist實(shí)例
這篇文章主要介紹了JS簡(jiǎn)單操作select和dropdownlist的方法,以實(shí)例形式講述了js針對(duì)服務(wù)器控件select和dropdownlist的讀寫(xiě)操作方法,是js與.net交互的典型應(yīng)用實(shí)例,需要的朋友可以參考下
2014-11-11
javascript 三種數(shù)組復(fù)制方法的性能對(duì)比
javascript 三種數(shù)組復(fù)制方法的性能對(duì)比,對(duì)于webkit, 使用concat; 其他瀏覽器, 使用slice.
2010-01-01
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實(shí)際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別，感興趣的可以了解一下
2022-02-02
JavaScript學(xué)習(xí)筆記整理之引用類(lèi)型
引用類(lèi)型是JavaScript中很重要的內(nèi)容，通過(guò)本文給大家介紹JavaScript學(xué)習(xí)筆記整理之引用類(lèi)型，對(duì)js引用類(lèi)型相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01