js中设置样式的几种方式(setAttribute,className)
以设置背景色为例子
可以用单一的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>