以设置背景色为例子
可以用单一的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>