获取 修改 CSS 样式

内联(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;
        }
    }

posted on 2016-01-26 11:18  迷茫小飞侠  阅读(414)  评论(0编辑  收藏  举报

导航