Javascript操作CSS样式.doc

Javascript 操作CSS样式 本文由本人从网上四处搜寻及测试后整理出，有错误清指出，QQ625365791 内嵌的CSS样式(Inline Style) div id=dom style=width:200px;border:1px solid red ; color:red; /div var dom = document.getElementById(dom); alert(dom.style.width); dom.style.width = 400px; 获取属性方式:dom.style.styleName (注意：必须写了的属性才能获取，比如使用dom.style.height是获取不了的) 设置属性方式: dom.style.styleName = styleValue ; （注：未写的属性也是可以设置的） 注：此外使用obj.currentStyle[css_attr] ( IE ) , window.getComputedStyle(obj, null).getPropertyValue(css_attr) ; ( Firefox , chrome ) 获得 内部样式(Internal Style Sheet ) #dom { width: 200px; height: 200px; border: 1px solid red ; display:none; } div id=dom”/div 获取属性方式： IE中： alert( document.styleSheets[0].rules[0].style.border) FireFox中： document.styleSheets[0].cssRules[0].style.border 设置属性方式： document.styleSheets[0].cssRules[0].style.border = 1px solid green;//FireFox document.styleSheets[0].rules[0].style.display = block;//IE 注：上述获得属性并不能获得没有写的属性，但使用上述方式动态增加后的属性可以获得 注：此外使用obj.currentStyle[css_attr] ( IE ) , window.getComputedStyle(obj, null).getPropertyValue(css_attr) ; ( Firefox , chrome ) 获得 外联样式( External Style Sheet ) test.css中 #dom { width:200px; height: 200px; background: #999; } 获得属性方式：( dom = document.getElementById(“dom”)) obj.currentStyle[css_attr] ( IE ) , 例：dom.currentStyle[“width”] window.getComputedStyle(obj, null).getPropertyValue(css_attr) ; ( Firefox , chrome ) 获得 例：window.getComputedStyle(dom, null).getPropertyValue(“windth”) ; 设置属性方式：dom.style.styleName 与第一种一样 注：无法使用前两种方式获得属性。 =========================================================================== 下面针对第二中写个兼容性的函数： function getstyle( cssSelector , styleName ) { for (var i = 0; i document.styleSheets.length; i++) { var rules; if (document.styleSheets[i].cssRules) { rules = document.styleSheets[i].cssRules;