DOM对象操作CSS

mac2022-06-30  29

通过style对象改变节点的CSS 利用style对象来控制元素的css, 每个style对象对应为该元素指定的css, 而每个css属性—对应于style对象的属性。 对于单个单词的css属性,在style对象中的属性名称不变。 对于双单词或多单词的属性改写为骆驼写法。例如:css中的font-size对应style属性为fontSize. 使用className属性指定结点样式 结点的className属性对应于css中的类选择器。

<body> <!-- DOM对象操作CSS 对DOM的style属性设置 样式名称和CSS中样式名称的区别 去掉- 变为驼峰命名法就可以 值 ""; --> <div id="mydiv" > </div> <input type="button" value="样式1" onclick="fun1()"> <input type="button" value="样式2" onclick="fun2()"> <input type="button" value="样式3" onclick="fun3()"> <script type="text/javascript"> var div = document.getElementById("mydiv"); function fun1(){ div.style.border="1px red solid"; div.style.width="300px"; div.style.height="300px"; } function fun2(){ div.style.backgroundColor="#0ff"; div.style.width="400px"; div.style.height="200px"; } function fun3(){ div.style.background="url(img/0.jpg) no-repeat 50% 50%"; div.style.width="400px"; div.style.height="200px"; } </script> </body>
最新回复(0)