美文网首页
时创优服|JavaScript 获取样式的兼容整理(一)

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

作者: 时创优服 | 来源:发表于2017-03-06 23:21 被阅读0次

    常见兼容 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低版本里面不能使用哦!

    相关文章

      网友评论

          本文标题:时创优服|JavaScript 获取样式的兼容整理(一)

          本文链接:https://www.haomeiwen.com/subject/jrrpgttx.html