style、 currentStyle、 runtimeStyle區別分析

2019-11-21 00:19:24

字體：大中小

來源：轉載

供稿：網友

1、obj.style只能獲得內嵌樣式（inline Style）就是寫在Tag里面的，他訪問不到那些鏈接的外部css和在head中用<style>聲明的style。
所以必須認識到在那些使用外部Css文件的頁面中，如果用style賦值，如obj.style=“color:red”;顯然效果是正確的，其中的奧秘確是只是在該對象的tag上多添加了一個style屬性，按照由小到大的優先級呈現罷了。
2、obj.currentStyle就強大多了，他能夠獲取關于這個節點所有位置的style，但是他也按照優先級，說穿了就是顯示的是什么他就是指向哪一個style，如下代碼字體優先是顯示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就根據優先級變成了yellow，但是此時style.color為空。
3、runtimeStyle簡單的說就是你可以對一個節點的樣式賦值，他將成為最高優先級的節點樣式。
如：

復制代碼代碼如下:

 
<!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> 