获取 修改 CSS 样式

Posted 2020-06-09

内联（style里的）样式

element.style.color

element.style.getPropertyValue("color")

 

非内联样式

window.getComputedStyle(elem1,null).getPropertyValue("backgroundColor");     (getComputedStyle(elem1,null)   第二个参数null用于获取伪类样式（":after"）)

document.defaultView.getComputedStyle(elem1,null).getPropertyValue("backgroundColor");  

(使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用)

ie(6-8)下需要使用元素方法实现：

object.currentStyle.backgroundColor    (   IE不支持DOM的style对象下的方法 ，例如element.style.removeProperty("color")   )

computed style都是只读的

 

 

下面这种可以获取<style>标签里面的样式

document.styleSheets[0].cssRules  ||  document.styleSheets[0].rules

 

添加多条样式到style属性：

element.style.cssText  = element.style.cssText + ";" + addcss(需要添加的样式);

（语法  element.style.cssText="width:200px;height:70px;display:bolck";  ） 

 

 

淘宝：

var styleEl = document.createElement("style");

    document.getElementsByTagName("head")[0].appendChild(styleEl);

    if (styleEl.styleSheet) {

        if (!styleEl.styleSheet.disabled) {                                                        //判断样式是否添加到document

            styleEl.styleSheet.cssText = cssText;

        }

    } else {

        try {

            styleEl.innerhtml = cssText

        } catch(e) {

            styleEl.innerText = cssText;

        }

    }