脚本化CSS

读写元素CSS属性

  1. dom.style.prop
    间接修改css属性
    div.style--->返回CSSStyleDeclaration类数组,记录这个div所能使用的所有css属性。因此,类数组作为一个实际上的对象,是可读可写的。
  • 可读写行间样式,(不能读写外联css样式),没有兼容性问题,碰到float这样的保留字属性,前面应加css
  • eg:float-->cssFloat
  • 复合属性必须拆解,组合单词变成小驼峰式写法
    eg:div.style.border尽量写成div.style.borderWidth;div.style.borderStyle
    background-color必须写成backgroundColor
  • 写入的值必须是字符串格式

查询计算样式

  1. window.getComputedStyle(ele,null);
    eg:window.getComputedStyle(div,null);-->获取的是当前这个元素所展示的一切css显示值CSSStyleDeclaration,包括默认值
    eg:window.getComputerStyle(div,null).width;-->获取权重最高的显示出来的最终值,与dom.style不一样,后者只读取行间样式。
  • 计算样式只读
  • 返回的计算样式的值都是绝对值,没有相对单位
  • IE8及IE8以下不兼容
  • null是用来填写伪元素的
  1. ele.currentStyle
  • 计算样式只读
  • 返回的计算样式的值不是经过转换的绝对值
  • IE独有的属性
  1. 封装兼容性方法getStyle(elem,prop);
function getStyle(elem,prop){
    if(window.getComputedStyle){
        return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currentStyle[prop];
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容