在编写程序的时候我们往往有时候需要获取一下样式表里的某个值,或某个属性。而通常我们的样式是写在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.οnlοad=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>里没有行间样式,那我们怎么去获取呢接着往下看!
这时我们就要用到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.οnlοad=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
自己的一个小总结,希望对大家有用.