js中设置样式的几种方式(setAttribute,className)
2012-08-21 15:45
567 查看
以设置背景色为例子
可以用单一的backgroundColor
可以用className
可以用setAttribute(setAttribute
和 removeAttribute)为一组
实例代码(实现效果点击一个按钮,就把整个背景色替换,点击其他的就换其他的)
可以用单一的backgroundColor
可以用className
可以用setAttribute(setAttribute
和 removeAttribute)为一组
实例代码(实现效果点击一个按钮,就把整个背景色替换,点击其他的就换其他的)
<html> <head> <title></title> <style type="text/css"> .bg{ background-color : "blue" ; } </style> <script language="javascript" type="text/javascript"> window.onload = function(){ $("redC").onclick = function(){ document.body.removeAttribute("className","bg"); document.body.style.backgroundColor = "red"; } $("blueC").onclick = function(){ document.body.style.backgroundColor = ""; document.body.setAttribute("className","bg"); // document.body.className = "bg"; } $("pinkC").onclick = function(){ document.body.removeAttribute("className","bg"); document.body.style.backgroundColor = "pink"; } $("blackC").onclick = function(){ document.body.removeAttribute("className","bg"); document.body.style.backgroundColor = "black"; } } function $(uid){ return document.getElementById(uid); } </script> </head> <body> <input type="button" value="red" id="redC"/> <input type="button" value="blue" id="blueC"/> <input type="button" value="pink" id="pinkC"/> <input type="button" value="black" id="blackC"/> </body> </html>
相关文章推荐
- JS设置CSS样式的几种方式
- 使用js改变DOM样式的三种方式 - className属性
- WPF设置样式的几种方式
- flex设置样式的几种方式
- 链接-JS设置CSS样式几种方式
- JS设置CSS样式的几种方式
- WPF设置样式的几种方式
- JS设置CSS样式的几种方式
- JS创建对象的几种方式
- js中创建对象的几种方式
- Js实现页面跳转的几种方式
- JS继承的几种方式
- 用js实现页面跳转的几种方式
- JS几种数组遍历方式以及性能分析对比
- js实现页面跳转的几种方式
- js实现页面跳转的几种方式
- js实现页面跳转的几种方式
- js关闭当前页面(窗口)的几种方式总结
- jmeter的JDBC Request中进行参数设置的几种方式
- JavaScript学习12 JS中定义对象的几种方式