style、 currentStyle、 runtimeStyle區(qū)別分析
更新時間：2010年08月01日 16:43:33 作者：
style、 currentStyle、 runtimeStyle區(qū)別分析,需要的朋友可以參考下。
1、obj.style只能獲得內(nèi)嵌樣式（inline Style）就是寫在Tag里面的，他訪問不到那些鏈接的外部css和在head中用<style>聲明的style。
所以必須認識到在那些使用外部Css文件的頁面中，如果用style賦值，如obj.style=“color:red”;顯然效果是正確的，其中的奧秘確是只是在該對象的tag上多添加了一個style屬性，按照由小到大的優(yōu)先級呈現(xiàn)罷了。
2、obj.currentStyle就強大多了，他能夠獲取關(guān)于這個節(jié)點所有位置的style，但是他也按照優(yōu)先級，說穿了就是顯示的是什么他就是指向哪一個style，如下代碼字體優(yōu)先是顯示blue的，那currentStyle.color就是blue，當然此時style.color也會是blue。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>testStyle</title>
<style>
.lala{
color:yellow;
}
</style>
</head>
<body>
<div id="tt" style="color:blue;" class="lala">1111</div>
</body>
<script>
alert(document.getElementById("tt").currentStyle.color);
</script>
</html>
若去掉以上<div>中的style為<div id="tt" class="lala">1111</div>，那么currentStyle.color就根據(jù)優(yōu)先級變成了yellow，但是此時style.color為空。
3、runtimeStyle簡單的說就是你可以對一個節(jié)點的樣式賦值，他將成為最高優(yōu)先級的節(jié)點樣式。
如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.lala{
color:yellow;
}</style>
</head>
<body>
<div id="tt" style="color:blue;" class="lala">1111</div>
</body>
<script>
document.getElementById("tt").runtimeStyle.color="black";
alert(document.getElementById("tt").currentStyle.color);
alert(document.getElementById("tt").runtimeStyle.color);
alert(document.getElementById("tt").style.color);
</script>
</html>
此時頁面顯示字的顏色是runtimeStyle賦值后的black。但是只有currentStyle.color和runtimeStyle本身能夠取到這個值,style.color取到的依然是tag中的blue。
所以必須認識到在那些使用外部Css文件的頁面中，如果用style賦值，如obj.style=“color:red”;顯然效果是正確的，其中的奧秘確是只是在該對象的tag上多添加了一個style屬性，按照由小到大的優(yōu)先級呈現(xiàn)罷了。
2、obj.currentStyle就強大多了，他能夠獲取關(guān)于這個節(jié)點所有位置的style，但是他也按照優(yōu)先級，說穿了就是顯示的是什么他就是指向哪一個style，如下代碼字體優(yōu)先是顯示blue的，那currentStyle.color就是blue，當然此時style.color也會是blue。
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>testStyle</title>
<style>
.lala{
color:yellow;
}
</style>
</head>
<body>
<div id="tt" style="color:blue;" class="lala">1111</div>
</body>
<script>
alert(document.getElementById("tt").currentStyle.color);
</script>
</html>
若去掉以上<div>中的style為<div id="tt" class="lala">1111</div>，那么currentStyle.color就根據(jù)優(yōu)先級變成了yellow，但是此時style.color為空。
3、runtimeStyle簡單的說就是你可以對一個節(jié)點的樣式賦值，他將成為最高優(yōu)先級的節(jié)點樣式。
如：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.lala{
color:yellow;
}</style>
</head>
<body>
<div id="tt" style="color:blue;" class="lala">1111</div>
</body>
<script>
document.getElementById("tt").runtimeStyle.color="black";
alert(document.getElementById("tt").currentStyle.color);
alert(document.getElementById("tt").runtimeStyle.color);
alert(document.getElementById("tt").style.color);
</script>
</html>
此時頁面顯示字的顏色是runtimeStyle賦值后的black。但是只有currentStyle.color和runtimeStyle本身能夠取到這個值,style.color取到的依然是tag中的blue。
您可能感興趣的文章:
- 通用于ie和firefox的函數(shù) GetCurrentStyle (obj, prop)
- (currentStyle)javascript為何有時用style得不到已設(shè)定的CSS的屬性
- javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹)
- 獲取css樣式表內(nèi)樣式的js函數(shù)currentStyle(IE),defaultView(FF)
- getComputedStyle與currentStyle獲取樣式(style/class)
- 元素未顯示設(shè)置width/height時IE中使用currentStyle獲取為auto
- JS獲取CSS樣式（style/getComputedStyle/currentStyle）
- 前端學(xué)習(xí)筆記style，currentStyle，getComputedStyle的用法與區(qū)別
相關(guān)文章
網(wǎng)易首頁的新聞代碼...2007-01-01
JavaScript異步操作的幾種常見處理方法實例總結(jié)
這篇文章主要介紹了JavaScript異步操作的幾種常見處理方法,結(jié)合實例形式總結(jié)分析了JavaScript常見的異步操作處理方法相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2020-05-05
關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡單使用，bootstrap-fileinput的
這篇文章主要介紹了關(guān)于bootstrap日期轉(zhuǎn)化,bootstrap-editable的簡單使用，bootstrap-fileinput的使用,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細介紹了微信小程序仿美團城市選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了JS基于正則表達式的替換操作(replace)用法,結(jié)合具體實例形式詳細分析了replace函數(shù)的語法、參數(shù)及具體使用技巧,需要的朋友可以參考下2017-04-04
這篇文章主要給大家介紹了關(guān)于如何通過setTimeout理解JS運行機制的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端上傳圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
![file-loader打包圖片文件時路徑錯誤輸出為[object-module]的解決方法](http://img.jbzj.com/images/xgimg/bcimg8.png)
file-loader打包圖片文件時路徑錯誤輸出為[object-module]的解決方法
這篇文章主要介紹了file-loader打包圖片文件時路徑錯誤輸出為[object-module]的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01 
這篇文章主要為大家詳細介紹了js實現(xiàn)經(jīng)典貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03