js操作样式总结
2012-09-10 21:41
204 查看
一、有关元素的样式操作
1.className属性
2.style属性
3.style的cssText属性
1.className属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css" rel="stylesheet"> .test { background: red; font-size: 30px; font-weight: bolder; } </style> </head> <body> <button onclick="addClass()">添加类</button> <div id="pos" >你好</div> </body> <script type="text/javascript"> var pos = document.getElementById('pos'); function addClass() { pos.className = "test";//设置pos的类为test } </script> </html>
2.style属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <button onclick="changeStyle()">改变style</button> <div id="pos" style="font-size: 30px; font-weight: bolder;" >你好</div> </body> <script type="text/javascript"> var pos = document.getElementById('pos'); function changeStyle() { /*此种方式不会重写style,但如果有同名的属性,会覆盖掉之前的值。 比如设置style.fontSize="40px;,会覆盖掉之前的font-size:30px"*/ pos.style.width = "200"; pos.style.height = "300";//注意,一定要加上"px"。 pos.style.border = "4px solid black"; pos.style.backgroundColor = "red";//从第二个单词开始后,首字母大写 } </script> </html>
3.style的cssText属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css" rel="stylesheet"> .test { background: red; } </style> </head> <body> <button onclick="changeCssText()">改变cssText</button> <button onclick="showCssText()">显示cssText</button> <div id="pos" style="font-size: 30px; font-weight: bolder;" class="test">你好</div> </body> <script type="text/javascript"> var pos = document.getElementById('pos'); function showCssText() { alert(pos.style.cssText); /*这里只会显示style属性中的值, 而不会显示test类中的值。*/ } function changeCssText() { pos.style.cssText = "width:250px; height:30px;"; /*给cssText属性赋值会重写style属性的值,原来设置的字体大小和加粗都没有了。*/ } </script> </html>
相关文章推荐
- 【JS总结】——DOM操作表格和样式
- JS 样式操作学习总结。
- JS操作JSON总结
- JS对JSON操作总结【转】
- JS操作属性、样式
- JS中对样式的操作!
- JS操作JSON总结
- html中select在js中的操作(再总结一下)
- js中对表格的操作总结
- javascript中字符串常用操作总结、JS字符串操作大全
- javascript中字符串常用操作总结、JS字符串操作大全
- 原生JS和jQuery操作DOM对比总结
- JS操作JSON总结
- js基本知识点总结-----js dom基本操作
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
- js字符串操作总结
- JS总结篇--[总结]JS操作DOM常用API详解
- JS操作JSON总结
- JS操作JSON总结