javascript脚本化CSS系列和封装兼容方法的getStyle(obj, prop)方法

脚本化CSS读写元素
dom.style.prop
可读写行间样式, 没有兼容性问题, 碰到float这样的关键字属性, 前面应加CSS
eg: float—>cssFloat
复合属性必须拆解, 组合单词变成小驼峰式写法
写入的值必须是字符串格式
查询计算样式
window.getComputedStyle(ele, null);
eg : window.getComputedStyle(el

脚本化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);

1
2
3
4
5
6
7
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

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!