【JavaScript高级程序设计】16、DOM2和DOM3
通过JavaScript来操作css
<!DOCTYPE html> <html> <head> <title>DOM Style Object Example</title> </head> <body> <div id="myDiv" style="background-color: blue; width: 10px; height: 25px"></div> <input type="button" value="Get Styles" onclick="getStyles()" /> <input type="button" value="Get CSS" onclick="getCSS()" /> <input type="button" value="Change Styles" onclick="changeStyles()" /> <input type="button" value="Change CSS" onclick="changeCSS()" /><br /> <input type="button" value="Enumerate" onclick="enumerateCSS()" /> <input type="button" value="Enumerate CSS Values" onclick="enumerateCSSValues()" /><br /> <input type="button" value="Remove Border" onclick="removeBorder()" /> <script type="text/javascript"> /** 改变css的类型 */ function changeStyles() { var myDiv = document.getElementById("myDiv"); //修改属性,设置背景颜色为brown,第三个是优先权标志,如果第二个标志乱写 //那么就不会改变它的颜色值 myDiv.style.setProperty("background-color", "brown", "");; //设置背景宽度为100px的宽度,第三个是优先权,入:important或者为空 myDiv.style.setProperty("width", "100px", ""); myDiv.style.setProperty("height", "200px", ""); //修改边界宽度 myDiv.style.setProperty("border", "1px solid black", ""); } //获取页面标签的页面样式 function getStyles() { var myDiv = document.getElementById("myDiv"); //输出其中的数据 alert(myDiv.style.getPropertyValue("background-color") + "<==>" + myDiv.style.getPropertyValue("width") + "<==>" + myDiv.style.getPropertyValue("height")); } /** 取得css文本代码 */ function getCSS() { var myDiv = document.getElementById("myDiv"); alert(myDiv.style.cssText); } /** 直接修改css文本 */ function changeCSS() { var myDiv = document.getElementById("myDiv"); myDiv.style.cssText ="width: 50px; height: 100px; background-color: red"; } /** 吧所有的css样式全部放到一个数组中,然后一次性全部输出 */ function enumerateCSS() { var myDiv = document.getElementById("myDiv"); var props = new Array(); for (var i=0, len=myDiv.style.length; i < len; i++) { var prop = myDiv.style[i]; //或者使用 myDiv.style.item(i) var value = myDiv.style.getPropertyValue(prop); props.push(prop + " : " + value); } alert(props.join("\n")); } /** 取得css的类型或者css类型的数据 */ function enumerateCSSValues() { var myDiv = document.getElementById("myDiv"); var props = new Array(); for (var i=0, len=myDiv.style.length; i < len; i++) { var prop = myDiv.style[i]; //or myDiv.style.item(i) if(typeof myDiv.style.getPropertyCssValue == "function") { var value = myDiv.style.getPropertyCSSValue(prop); props.push(prop + " : " + value.cssText + " (" + value.cssValueType + ")"); } else { alert("there is no function about getPropertyCssValue"); } } alert(props.join("\n")); } /** 去除css的边框属性 */ function removeBorder() { var myDiv = document.getElementById("myDiv"); myDiv.style.removeProperty("border"); } </script> </body> </html>优质内容筛选与推荐>>