提问：问下下面的js 怎么把id 的改成 class 属性啊？
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div设置宽度背景颜色js代码</title>
</head>
<style>
*{margin:0px;padding:0px;}
ul,li{list-style-type:none;}
.derrr{border:1px solid #000;width:100px;height:100px;margin:20px;}
p{margin:20px;font-weight:bold;font-Size:20px}
#set{position:absolute;width:250px;height:218px;border:10px solid #cef;display:none;top:100px;left:600px;z-index:3;background:#fff;}
#set ul li{height:40px;line-height:40px;padding:10px;}
button{width:30px;height:30px;border:1px solid #000;}
#red{background:red;}
#yellow{background:yellow;}
#green{background:green;}
span{width:112px;display:inline-block;}
#oBth2,#oBth3,#oBth4,#oBth5,#oBth6,#oBth7{background:#ccc;}
#oBtn8,#oBtn9{width:60px;height:30px;background:#ecf;margin-left:45px;}
</style>
<body>
<div>
<div id="oBtn1" class="derrr">1111</div>
</div>
<div id="set">
<ul>
<li>
<span>请选择颜色：</span>
<button id="red">红</button>
<button id="yellow">黄</button>
<button id="green">绿</button>
</li>
<button id="oBtn8">重置</button><button id="oBtn9">确认</button>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
var oSet = document.getElementById('set');
var red = document.getElementById('red');
var yellow = document.getElementById('yellow');
var green = document.getElementById('green');
var oBtn8 = document.getElementById('oBtn8');
var oBtn9 = document.getElementById('oBtn9');
var oBtn1 = document.getElementById('oBtn1');
var oDemo = document.getElementById('oBtn1');
oBtn1.onclick = function (){
oSet.style.display='block';
document.getElementsByTagName("body")[0].style.background='#ccc';
};
red.onclick = function(){
oDemo.style.background = 'red';
};
yellow.onclick = function(){
oDemo.style.background = 'yellow';
};
green.onclick = function(){
oDemo.style.background = 'green';
};
oBtn8.onclick = function(){
oDemo.style.background = '#fff';
};
oBtn9.onclick = function (){
oSet.style.display='none';
document.getElementsByTagName("body")[0].style.background='#fff';
};
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div设置宽度背景颜色js代码</title>
</head>
<script type="text/javascript" src="http://www.hsspw.com/hssc/JS/jquery.min.js"></script>
<style>
*{margin:0px;padding:0px;}
ul,li{list-style-type:none;}
.derrr{border:1px solid #000;width:100px;height:100px;margin:20px;}
p{margin:20px;font-weight:bold;font-Size:20px}
#set{position:absolute;width:250px;height:218px;border:10px solid #cef;display:none;top:100px;left:600px;z-index:3;background:#fff;}
#set ul li{height:40px;line-height:40px;padding:10px;}
button{width:30px;height:30px;border:1px solid #000;}
#red{background:red;}
#yellow{background:yellow;}
#green{background:green;}
span{width:112px;display:inline-block;}
#oBth2,#oBth3,#oBth4,#oBth5,#oBth6,#oBth7{background:#ccc;}
#oBtn8,#oBtn9{width:60px;height:30px;background:#ecf;margin-left:45px;}
</style>
<body>
<div>
<div id="oBtn1" class="derrr">1111</div>
</div>
<div id="set">
<ul>
<li>
<span>请选择颜色：</span>
<button id="red">红</button>
<button id="yellow">黄</button>
<button id="green">绿</button>
</li>
<button id="oBtn8">重置</button><button id="oBtn9">确认</button>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
var oSet = document.getElementById('set');
var red = document.getElementById('red');
var yellow = document.getElementById('yellow');
var green = document.getElementById('green');
var oBtn8 = document.getElementById('oBtn8');
var oBtn9 = document.getElementById('oBtn9');
var oBtn1 = document.getElementById('oBtn1');
var oDemo = document.getElementById('oBtn1');
oBtn1.onclick = function (){
oSet.style.display='block';
document.getElementsByTagName("body")[0].style.background='#ccc';
};
red.onclick = function(){
oDemo.style.background = 'red';
};
yellow.onclick = function(){
oDemo.style.background = 'yellow';
};
green.onclick = function(){
oDemo.style.background = 'green';
};
oBtn8.onclick = function(){
oDemo.style.background = '#fff';
};
oBtn9.onclick = function (){
oSet.style.display='none';
document.getElementsByTagName("body")[0].style.background='#fff';
};
}
$(document).ready(function(){
$("#set").click(function(){
alert("出现我就对了");
$("#set").attr("id","zz");
$('#set').addClass('suibian');
});
});
</script>
</body>
</html>
