您好,登錄后才能下訂單哦!
這篇文章給大家介紹使用JavaScript非行間樣式怎么獲取函數(shù),內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
行間樣式:元素內(nèi)部用style定義的樣式,如:<div ></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" > 寬 </div> </body> <script type="text/javascript" > window.onload =function(){ var oDiv1=document.getElementById('div1'); oDiv1.onclick=function(){ oDiv1.style.width=200+'px'; } } </script> </html>
我在頁面放了一個方塊,紅底黑邊,想通過點(diǎn)擊該方塊讓他的寬度變?yōu)?00px,看一下結(jié)果——沒有任何反應(yīng),也沒有報(bào)錯。
在事件中添加alert('a');有反應(yīng),說明onclick事件被觸發(fā)了,那么就是
oDiv1.style.Width=200+'px';
這行代碼有問題。
打印一下這個這個變量:
alert(oDiv1.style.Width);
雖然不報(bào)錯,但是顯示空白,即使用變量賦值之后任然無法獲取這個值,真正的原因是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í)際上不可能把所有樣式都寫在行間。
要解決這個問題,需要引入兩個元素屬性——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>
把他封裝一下寫成一個公用函數(shù):
//obj:哪個元素 //attr:那個樣式 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']
關(guān)于使用JavaScript非行間樣式怎么獲取函數(shù)就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。