javascript中獲取非行間樣式的方法

時間 2019-11-11

原文原文鏈接

在編寫程序的時候咱們每每有時候須要獲取一下樣式表裏的某個值，或某個屬性。而一般咱們的樣式是寫在css的文件裏的，那咱們該怎麼來去獲取呢？咱們又爲何要用這種方法呢？下面就來段代碼比較下javascript

本文就用一個例子來分享，css

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title> </title>

<style>

#div1{width:100px; height:100px;background:#00F; }

</style>

<script>

//獲取行間樣式

 一般咱們

window.onload=function(){

         varodiv=document.getElementById('div1');

var odiv2=document.getElementById('div2');

         alert (odiv.style. width)//結果是什麼都沒有，

         alert (odiv2.style. width)// 100px; 經常使用的寫法

}

</script>

</head>

<body>

<div id="div1"></div>

<div id="div2" style=」 width:100px;height:100px; background:#00F;」></div>

</body>

</html>

結論：緣由是<divid="div1"></div>裏沒有行間樣式，那咱們怎麼去獲取呢接着往下看！html

這時咱們就要用到currentStyle來解決。java

把odiv.style. width換成odiv. currentStyle.Width就能夠了！可是這玩意只能在IE9下用，而到了FF下他就完全廢了，在FF這是咱們能夠這樣寫瀏覽器

alert(getComputedStyle(odiv,false).width);函數

getComputedStyle(odiv,false)這裏的兩個參數，第一個參數表明要獲取那個元素的樣式，第二個是解決FF較低版本的寫法，而對於高版本的能夠不用寫。ui

兼容性的寫法code

if(odiv.currentStyle){   //若是符合就true  

                   alert(odiv.currentStyle.width);
                 
                   }

           else{

                    alert(getComputedStyle(odiv,false).width);

                   }

這樣就完美的解決了瀏覽器的兼容性問題。htm

固然有人會說，若是我要獲取別的屬性，豈不是每次都要去改，特麻煩！對象

是的！接下來就把它封裝成一個函數讓它實用起來

function getstyle(obj, attr){
if(odiv.currentStyle){   //若是符合就true  
                   return odiv.currentStyle[attr];                  
                   }
         else{
           return getComputedStyle(obj,false)[attr];
                   }       

}
window.onload=function(){
var odiv=document.getElementById('div1');
alert(getstyle(odiv,width))//100px;
}

這樣一個獲取非行間的函數就封裝好了，相信有些人會問obj.currentStyle[attr];是什麼意思？爲何要加[attr]？爲何不能夠這樣寫問obj.currentStyle.[attr];後者是錯誤的寫法，js也不容許這樣寫，接下來來個例子，解釋下吧！

Var a=」alert」;
Window[a](「aaaa」)//aaa

看完是否是有點懂了！

其實這也涉及到一個基礎問題就是訪問對象的屬性或方法的方式

咱們想一下window是否是有不少屬性或方法，而有時咱們沒法推測用戶用的是哪一個屬性或方法，這是咱們就能夠用個變量來存儲odiv.currentStyle[attr]，attr就是個變量，當用戶輸入width時就至關於attr=」width」,=》odiv.currentStyle[‘width’]== odiv.currentStyle.width

本身的一個小總結，但願對你們有用.