老生常談JavaScript獲取CSS樣式的方法(兼容各瀏覽器)
眾所周知，CSS樣式有三種類型：行內(nèi)樣式、內(nèi)部樣式和外部樣式，JavaScript獲取CSS樣式時分為兩種情況：行內(nèi)樣式獲取法 和 非行內(nèi)樣式獲取法 。
一、行內(nèi)樣式獲取相對簡單，通過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()'>博客園--開發(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)行：
通過element.style.attr即可獲取行內(nèi)樣式屬性值，也可設(shè)置屬性值，形式如：obj.style.width = 300 + 'px';
二‘、非行內(nèi)樣式獲取法，因?yàn)g覽器的不同又分為兩種，即基于IE瀏覽器的 和 非IE瀏覽器的如谷歌火狐等。
1、基于IE瀏覽器的非行內(nèi)獲取法：通過 element.currentStyle['attr']
IE運(yùn)行結(jié)果：
2、基于非IE如火狐谷歌等非行內(nèi)獲取法：通過 getComputedStyle(element.null/偽類)[attr]
火狐運(yùn)行結(jié)果：
二者兼容定法：
總結(jié)：以上就是JavaScript獲取CSS樣式的方法，其中獲取非行內(nèi)樣式兼容IE和非IE可通過封裝一個函數(shù)，實(shí)現(xiàn)多次調(diào)用，
切記：非行內(nèi)樣式獲取法，只能獲取不能設(shè)置。
總結(jié)
以上所述是小編給大家介紹的老生常談JavaScript獲取CSS樣式的方法(兼容各瀏覽器)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js簡單實(shí)現(xiàn)網(wǎng)頁換膚功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了input框中的name和id的區(qū)別介紹，非常不錯，具有參考借鑒價值,需要的朋友可以參考下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é)了三種常見的JavaScript日期格式化技巧,需要的朋友可以參考下2015-12-12
javascript實(shí)現(xiàn)拖動元素交換位置
這篇文章主要介紹了javascript實(shí)現(xiàn)拖動元素交換位置的方法，類似拼圖游戲拖拽卡片效果，感興趣的小伙伴們可以參考一下2015-11-11
js實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)日期顯示的一些操作(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JS簡單操作select和dropdownlist實(shí)例
這篇文章主要介紹了JS簡單操作select和dropdownlist的方法,以實(shí)例形式講述了js針對服務(wù)器控件select和dropdownlist的讀寫操作方法,是js與.net交互的典型應(yīng)用實(shí)例,需要的朋友可以參考下2014-11-11
javascript 三種數(shù)組復(fù)制方法的性能對比
javascript 三種數(shù)組復(fù)制方法的性能對比,對于webkit, 使用concat; 其他瀏覽器, 使用slice.2010-01-01
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實(shí)際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別 ，感興趣的可以了解一下2022-02-02
JavaScript學(xué)習(xí)筆記整理之引用類型
引用類型是JavaScript中很重要的內(nèi)容，通過本文給大家介紹JavaScript學(xué)習(xí)筆記整理之引用類型，對js引用類型相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01