html的div元素响应onclick事件

时间:2022-12-29 09:06:34

<html>
<head>
<script type="text/javascript">
function mfunction(){
var mButton=document.getElementById("up");
mButton.onclick = function() {
if(document.getElementById("up").className==="up"){
document.getElementById("up").className="down"
}else{
document.getElementById("up").className="up"
}
document.body.focus();
}
}
window.onload=function(){
mfunction();
}
</script>
<style type="text/css">
.up{
width:160px;
text-align:center;
border-right:#222 3px solid;
border-top:#ddd 3px solid;
border-left:#ddd 3px solid;
border-bottom:#222 3px solid;
background-color:#ccc;
}
.down{
width:160px;
text-align:center;
border-left:#222 3px solid;
border-bottom:#ddd 3px solid;
border-right:#ddd 3px solid;
border-top:#222 3px solid;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="up" onclick="click()">有立体效果的按钮</div>
</body>
</html>

理论上,onclick事件只有表单控件可以响应,但有时候我们需要任意元素响应该事件,怎么办呢

代码如上