时创优服|JavaScript 获取样式的兼容整理(一)

常见兼容 IE、 FF、 Google Chrome

官网地址:http://www.bjtces.com

导读:在学习或者使用javascript的过程中,最为痛苦的就是浏览器兼容问题

1、样式的获取(注意:样式表里面的css属性,而非行间样式)与设置兼容写法

解决办法(封装函数) :currentStyle(IE) getComputedStyle(标准浏览器)

参数说明:obj为传入的当前元素、attr为获取或设置的属性名、val设置行间样式属性时能用到的设置值

获取和设置属性的封装函数

function css(obj,attr,val){

if(!val){

if(obj.currentStyle){

//IE独的属性。

return obj.currentStyle[attr];

}else{

//只有标准浏览器支持。

return getComputedStyle(obj,false)[attr];

}

}else{

//设置行间样式属性对应值

obj.style[attr]=val;

}

}

代码使用示例:

css样式:

#example{width:100px;height:100px;background:red;}

HTML结构:

获取元素样式

JavaScript调用方法:

//获取css样式

console.log(css(item,'width'));

返回结果:100px

//设置行间样式

css(item,'margin',"200px");

注意console.log在IE低版本里面不能使用哦!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容