javaScript获取css样式

发表于 | 分类于 | 次

javaScript获取css样式

css样式分为行内样式与外部样式

  1. javaScript获得行内样式
    可以使用ele.style.属性名称(如果遇到属性名称带有‘-’，需要使用驼峰方法，例如background-color改为backgroundColor)；
  2. javaScript获得外部样式(getComputedStyle可以获得style的值也可以获得外部样式表的css)
    获得外部样式可以使用浏览器提供的window.getComputedStyle(ele,null)，这里的ele就是需要操作的对象，第二个参数是指定一个伪元素匹配，常规的元素用不上，直接使用null。但这个getComputedStyle并不支持IE9以下的浏览器，但是ie有它自己支持的方法：ele.currentStyle;
  3. ele.style.属性名和ele.cssText以及getComputedStyle(obj,null)有什么区别？
    • ele.style.属性名：这里获得的style可以获得属性值，也可以进行修改
    • ele.cssText: 其实跟style差不多，只不过它是获得多个css样式，也是生成在行内样式中。
    • getComputedStyle(obj,null)： 只能获取不能修改，并且返回的css是一个CSSStyleDecoration对象集合。