Question

用javascript让两个按钮分别控制DIV的大小 鼠标点击一下就放大或者小10PX的那种

你好 我在学javascript 现在想做一个在HTML里添加两个按钮和一个DIV 用javascript让两个按钮分别控制DIV的大小 鼠标点击一下就放大或者小10PX的那种 请问我具体应该怎么做 我给了DIV变量 后面具体不晓得怎么做了 麻烦您指教指教





Answer 1

使用js和css来做，用js控制css的切换，css用于展现。
css：
<style>
.big-one {
width: 210px;
height: 210px;
}
.small-one {
width: 200px;
height: 200px;
}
</style>
div:
<div id="target_div" class="big-one">
<button onclick="toBig()">toBig</button>
<button onclick="toSmall()">toSmall</button>
</div>
js:
<script type="text/javascript">
function toBig(){
var tarDiv = document.getElementById('target_div');
tarDiv.setAttribute('class','big-one');
}
function toSmall(){
var tarDiv = document.getElementById('target_div');
tarDiv.setAttribute('class','small-one');
}
</script>

Answer 2

按钮onclick事件，点击修改css样式即可。
一般的做法是可以把style样式写在两个class里面，点击事件更换className。