美文网首页
javascript脚本化CSS系列和封装兼容方法的getSty

javascript脚本化CSS系列和封装兼容方法的getSty

作者: 刘翾 | 来源:发表于2017-11-08 20:54 被阅读12次

    脚本化CSS

    读写元素

    • dom.style.prop
      • 可读写行间样式, 没有兼容性问题, 碰到float这样的关键字属性, 前面应加CSS
      • eg: float--->cssFloat
      • 复合属性必须拆解, 组合单词变成小驼峰式写法
      • 写入的值必须是字符串格式

    查询计算样式

    • window.getComputedStyle(ele, null);
      • eg : window.getComputedStyle(elem, 'before'), 这样取的是伪元素的样式表
    • 计算 只读 样式
    • 返回的计算样式的值都是绝对值, 没有相对单位
    • IE8以及IE8以下不兼容

    查询样式

    • ele.currentStyle
    • 计算样式只读
    • 返回的计算样式的值不是经过转换的绝对值
    • IE独有的属性

    封装兼容方法getStyle(obj, prop);

    function getStyle(elem, prop,fakeNode) {
        if(window.getComputedStyle){
            return window.getComputedStyle(elem, fakeNode)[prop];
        }else{//低版本IE
            return elem.currentStyle[prop];
        }
    }
    

    学到这里的朋友们就可以自己尝试去做一个轮播图了, 下面附上我自己做的轮播图代码链接, http://blog.csdn.net/c_kite/article/details/53190653

    相关文章

      网友评论

          本文标题:javascript脚本化CSS系列和封装兼容方法的getSty

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