js中设立样式的几种方式（setAttribute，className）
日期：2014-05-16 浏览次数：20371 次
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
