javascript点击按钮改变背景色的问题
刚入门javascript，遇到一个作业不太会做：一个4*4的表格里有16个按钮<button>，每个按钮都有一个文本比如red，black之类，如何写一个函数可以在点击...
刚入门javascript，遇到一个作业不太会做：
一个4*4的表格里有16个按钮<button>，每个按钮都有一个文本比如red，black之类，如何写一个函数可以在点击按钮时根据文本来改变网页背景色？。谢谢。
<table>
<tr>
<td><button type="button">Red</button></td>
<td><button type="button">Blue</button></td>
<td><button type="button">Green</button></td>
<td><button type="button">Yellow</button></td>
</tr>
....
....
....
</table> 展开
一个4*4的表格里有16个按钮<button>，每个按钮都有一个文本比如red，black之类，如何写一个函数可以在点击按钮时根据文本来改变网页背景色？。谢谢。
<table>
<tr>
<td><button type="button">Red</button></td>
<td><button type="button">Blue</button></td>
<td><button type="button">Green</button></td>
<td><button type="button">Yellow</button></td>
</tr>
....
....
....
</table> 展开
3个回答
展开全部
用js直接修改style的背景色就可以了，
下面是代码，仅供参考：
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
this.style.backgroundColor = 'red';s
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="click me" />
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<table>
<tr>
<td><button type="button" onClick="document.body.style.backgroundColor='red';">Red</button></td>
<td><button type="button" onClick="document.body.style.backgroundColor='blue';">Blue</button></td>
<td><button type="button" onClick="document.body.style.backgroundColor='green';">Green</button></td>
<td><button type="button" onClick="document.body.style.backgroundColor='yellow';">Yellow</button></td>
</tr>
</table>
<tr>
<td><button type="button" onClick="document.body.style.backgroundColor='red';">Red</button></td>
<td><button type="button" onClick="document.body.style.backgroundColor='blue';">Blue</button></td>
<td><button type="button" onClick="document.body.style.backgroundColor='green';">Green</button></td>
<td><button type="button" onClick="document.body.style.backgroundColor='yellow';">Yellow</button></td>
</tr>
</table>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
function chg(col){
document.body.style.backgroundColor = col;
}
</script>
<table>
<tr>
<td><button type="button" id="red" onclick="chg(this.id);">Red</button></td>
<td><button type="button" id="blue" onclick="chg(this.id);">Blue</button></td>
<td><button type="button" id="green" onclick="chg(this.id);">Green</button></td>
<td><button type="button" id="yellow" onclick="chg(this.id);">Yellow</button></td>
</tr>
....
....
....
</table>
function chg(col){
document.body.style.backgroundColor = col;
}
</script>
<table>
<tr>
<td><button type="button" id="red" onclick="chg(this.id);">Red</button></td>
<td><button type="button" id="blue" onclick="chg(this.id);">Blue</button></td>
<td><button type="button" id="green" onclick="chg(this.id);">Green</button></td>
<td><button type="button" id="yellow" onclick="chg(this.id);">Yellow</button></td>
</tr>
....
....
....
</table>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
