javascript中获取非行间样式的方法。

来源：互联网发布：淘宝颜真卿钢笔字帖编辑：程序博客网时间：2024/06/07 02:33

在编写程序的时候我们往往有时候需要获取一下样式表里的某个值，或某个属性。而通常我们的样式是写在css的文件里的，那我们该怎么来去获取呢？我们又为什么要用这种方法呢？下面就来段代码比较下

本文就用一个例子来分享，

<html>

<head>

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

<style>

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

</style>

//获取行间样式

通常我们

window.onload=function(){

varodiv=document.getElementById('div1');

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

alert (odiv.style. width)//结果是什么都没有，

alert (odiv2.style. width)// 100px; 常用的写法

}

</script>

</head>

<body>

</body>

</html>

结论：原因是<divid="div1"></div>里没有行间样式，那我们怎么去获取呢接着往下看！

这时我们就要用到currentStyle来解决。

把odiv.style. width换成odiv. currentStyle.Width就可以了！但是这玩意只能在IE9下用，而到了FF下他就彻底废了，在FF这是我们可以这样写

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

getComputedStyle(odiv,false)这里的两个参数，第一个参数代表要获取那个元素的样式，第二个是解决FF较低版本的写法，而对于高版本的可以不用写。

兼容性的写法

if(odiv.currentStyle){ //如果符合就true

alert(odiv.currentStyle.width);

}

else{

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

}

这样就完美的解决了浏览器的兼容性问题。

当然有人会说，如果我要获取别的属性，岂不是每次都要去改，特麻烦！

是的！接下来就把它封装成一个函数让它实用起来

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

自己的一个小总结，希望对大家有用.

0 0