JS非行間樣式獲取函數的實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:13:21

JS非行間樣式獲取函數的實例代碼

JS非行間樣式獲取函數的實例代碼:行間樣式：元素內部用style定義的樣式，如:<div style=width:200px;></div> 非行間樣式：在<style></style>內通過css定義的樣式先看一段出問題的代碼 <!DOCTYPE html> <html>

推薦度：

點擊下載本文 文檔為doc格式

導讀JS非行間樣式獲取函數的實例代碼:行間樣式：元素內部用style定義的樣式，如:<div style=width:200px;></div> 非行間樣式：在<style></style>內通過css定義的樣式先看一段出問題的代碼 <!DOCTYPE html> <html>

行間樣式：元素內部用style定義的樣式，如:<div style="width:200px;"></div>

非行間樣式：在<style></style>內通過css定義的樣式

先看一段出問題的代碼

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 </head> 
 <style> 
 div{ 
 height: 100px; 
 width: 100px; 
 border: 2px solid black; 
 background: red; 
 } 
 </style> 
 <body> 
 <div id="div1" style=""> 
 寬 
 </div> 
 </body> 
 <script type="text/javascript" > 
 window.onload =function(){ 
 var oDiv1=document.getElementById('div1'); 
 oDiv1.onclick=function(){ 
 oDiv1.style.width=200+'px'; 
 } 
 } 
 </script> 
</html>

我在頁面放了一個方塊，紅底黑邊，想通過點擊該方塊讓他的寬度變?yōu)?00px，看一下結果——沒有任何反應，也沒有報錯。

在事件中添加alert('a');有反應，說明onclick事件被觸發(fā)了，那么就是

oDiv1.style.Width=200+'px';

這行代碼有問題。

打印一下這個這個變量：

alert(oDiv1.style.Width);

雖然不報錯，但是顯示空白，即使用變量賦值之后任然無法獲取這個值，真正的原因是style只能獲取行間樣式，試一下：

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 </head> 
 <style> 
 
 </style> 
 <body> 
 <div id="div1" style="height: 100px; 
 width: 100px; 
 border: 2px solid black; 
 background: red;"> 
 寬 
 </div> 
 </body> 
 <script type="text/javascript" > 
 window.onload =function(){ 
 var oDiv1=document.getElementById('div1'); 
 oDiv1.onclick=function(){ 
 oDiv1.style.width=200+'px'; 
 } 
 } 
 </script> 
</html>

可以確定確實是行間樣式與非行間樣式的問題，實際上不可能把所有樣式都寫在行間。

要解決這個問題，需要引入兩個元素屬性——currentStyle和getComputedStyle(obj, false)

currentStyle——獲取非行間（當前樣式）IE瀏覽器專屬，chrome和FF不兼容。

getComputedStyle(obj, false)——獲取非行間（計算后的樣式）IE不兼容。

<script type="text/javascript" > 
 window.onload =function(){ 
 var oDiv1=document.getElementById('div1'); 
 oDiv1.onclick=function(){ 
 //FF、chrome 
 alert(getComputedStyle(oDiv1, false).width); 
 //IE 
 alert(oDiv1.currentStyle.width); 
 } 
 } 
</script>

把他封裝一下寫成一個公用函數：

//obj：哪個元素 
//attr：那個樣式 
function getStyle(obj,attr){ 
 if(obj.currentStyle){ 
 //IE 
 return obj.currentStyel[attr]; 
 }else{ 
 //FF 
 return getComputedStyle(obj, false)[attr]; 
 } 
}

通過判斷obj.currentStyle是否為真來判斷當前瀏覽器為IE還是其他。

注意：.width的寫法可以寫成['width']

總結

以上所述是小編給大家介紹的JS非行間樣式獲取函數的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com