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

本身的一个小总结，但愿对你们有用.