提问：问下下面的js 怎么把id 的改成 class 属性啊？

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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> 展开

 我来答

2个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

hougy1990
推荐于2016-01-18 · 超过19用户采纳过TA的回答

知道答主

回答量：60

采纳率：0%

帮助的人：28.9万

我也去答题访问个人页

关注

展开全部

<!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>
<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>

已赞过 已踩过<

评论收起

苏苏suue
2018-10-27

知道答主

回答量：3

采纳率：0%

帮助的人：2328

我也去答题访问个人页

关注

展开全部

DOCTYPEhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

提问：问下下面的js 怎么把id 的改成 class 属性啊？

其他类似问题

为你推荐：