行間樣式：元素內(nèi)部用style定義的樣式，如:<div style="width:200px;"></div>
非行間樣式：在<style></style>內(nèi)通過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> 我在頁面放了一個(gè)方塊，紅底黑邊，想通過點(diǎn)擊該方塊讓他的寬度變?yōu)?00px，看一下結(jié)果――沒有任何反應(yīng)，也沒有報(bào)錯(cuò)。
在事件中添加alert('a');有反應(yīng)，說明onclick事件被觸發(fā)了，那么就是
oDiv1.style.Width=200+'px';
這行代碼有問題。
打印一下這個(gè)這個(gè)變量：
alert(oDiv1.style.Width);
雖然不報(bào)錯(cuò)，但是顯示空白，即使用變量賦值之后任然無法獲取這個(gè)值，真正的原因是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> 可以確定確實(shí)是行間樣式與非行間樣式的問題，實(shí)際上不可能把所有樣式都寫在行間。
要解決這個(gè)問題，需要引入兩個(gè)元素屬性――currentStyle和getComputedStyle(obj, false)
currentStyle――獲取非行間（當(dāng)前樣式）IE瀏覽器專屬，chrome和FF不兼容。
getComputedStyle(obj, false)――獲取非行間（計(jì)算后的樣式）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> 把他封裝一下寫成一個(gè)公用函數(shù)：
//obj：哪個(gè)元素 //attr：那個(gè)樣式 function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyel[attr]; }else{ //FF return getComputedStyle(obj, false)[attr]; } } 通過判斷obj.currentStyle是否為真來判斷當(dāng)前瀏覽器為IE還是其他。
注意：.width的寫法可以寫成['width']
總結(jié)
以上所述是小編給大家介紹的JS非行間樣式獲取函數(shù)的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
