在使用dom操作内联样式和当前样式时,需要注意的问题很多
特别是浏览器的兼容性问题
首先是操作内联样式‘先来看看简单的例子代码
<script type="text/javascript">
window.onload=function(){
//点击按钮修改box1大小
//获取box1
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick=function(){
//在这之中通过语法:元素.style.样式名=样式值;来修改内联样式
box1.style.width="250px";
alert(box1.style.width);
}
//读取样式
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
//通过语法:元素.style.样式名;来读取内联样式
}
}
</script>
这是一个通过点击按钮修改元素属性的代码,浅显易懂
但要注意类似于background-color之类的属性要使用驼峰书写
即backgroundColor
样式中也尽量不要出现!important,优先级过高会导致js代码无法读取内联样式。
第二个就是获取当前样式啦,这个细节比较多
先上代码:
<script type="text/javascript">
window.onload=function(){
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick=function(){
//在这之中通过语法:元素.currentStyle.样式名=样式值;来查看当前显示的样式,只兼容ie
//alert(box1.currentStyle.width);
//兼容其他浏览器,则使用getComputedStyle()
//两个参数,一个是元素,一个是null
alert(getComputedStyle(box1,null).width);
}
</script>
这里就出现了两个方式:
1.currentStyle属性(只兼容ie)555,ie终于争气了一回
语法在代码注释中也很清楚
2.getComputedStyle( )方法,兼容其他浏览器
这个方法的返回值是一个对象,封装了当前元素的对应样式
语法在代码注释里有
但是,如果想要任何浏览器都兼容的话,那怎么办呢?
这个时候就需要我们自己来写一个函数
废话不多说,上代码
<script type="text/javascript">
//兼容所有浏览器,自己写一个函数
//参数:obj 需要获取的样式元素 name 需要获取的样式名
function getStyle(obj,name){
if(window.getComputedStyle){
//必须用window.,因为后面那个属性是变量,全局作用域和局部作用域中都没有定义
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
</script>
这个就是能兼容所有浏览器的方法啦,
有一些细节展示在了代码注释里
比如window.getComputedStyle前面必须要有window,否则会报错,因为浏览器引擎是从函数内搜到外,直到全局作用域,而这个getComputedStyle是一个变量,在全局作用域中没有定义。
另外值得一提的是,通过currentStyle和getComputedStyle()获取的属性都是只读不修改的哦。