快捷導(dǎo)航

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。
所以必須認(rèn)識到在那些使用外部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，當(dāng)然此時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。

您可能感興趣的文章:

相關(guān)文章

javacript使用break內(nèi)層跳出外層循環(huán)分析
這篇文章主要介紹了javacript使用break內(nèi)層跳出外層循環(huán)的用法,以實例形式對比分析了循環(huán)跳出break語句的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
window.location和document.location的區(qū)別分析
用戶不能改變document.location(因為這是當(dāng)前顯示文檔的位置)。但是,可以改變window.location (用其它文檔取代當(dāng)前文檔)window.location本身也是一個對象,而document.location不是對象
2008-12-12
vue/js實現(xiàn)頁面自動往上滑動效果
這篇文章主要為大家詳細(xì)介紹了vue/js實現(xiàn)頁面自動往上滑動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
解決layui中onchange失效以及form動態(tài)渲染失效的問題
今天小編就為大家分享一篇解決layui中onchange失效以及form動態(tài)渲染失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
js表單處理中單選、多選、選擇框值的獲取及表單的序列化
這篇文章主要介紹了js表單處理中單選、多選、選擇框值的獲取及表單的序列化的相關(guān)資料,需要的朋友可以參考下
2016-03-03
Antd中Table列表行默認(rèn)包含修改及刪除功能的封裝方法
這篇文章主要介紹了Antd中Table列表行默認(rèn)包含修改及刪除功能的封裝,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
基于javascript制作微博發(fā)布欄效果
這篇文章主要介紹了基于javascript制作微博發(fā)布欄效果的相關(guān)資料,需要的朋友可以參考下
2016-04-04
JS實現(xiàn)兼容性較好的隨屏滾動效果
這篇文章主要介紹了JS實現(xiàn)兼容性較好的隨屏滾動效果,演示了固定位置顯示和隨屏滾動兩種效果的實現(xiàn)方法,涉及css樣式的設(shè)置與結(jié)合時間函數(shù)遞歸調(diào)用實現(xiàn)滾屏的技巧,需要的朋友可以參考下
2015-11-11
es6數(shù)組之?dāng)U展運算符操作實例分析
這篇文章主要介紹了es6數(shù)組之?dāng)U展運算符操作,結(jié)合實例形式總結(jié)分析es6數(shù)組擴展運算符具體原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下
2020-04-04
JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法實例總結(jié)
這篇文章主要介紹了JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法,結(jié)合實例形式總結(jié)分析了JavaScript針對子節(jié)點、父節(jié)點和兄弟節(jié)點獲取相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下
2018-07-07