<body>
<div id="box">hello</div>
<input type="text" id="inp1"><input type="button" value="改变背景" id="btn1">
<input type="text" id="inp2"><input type="button" value="改变文字颜色" id="btn2">
<input type="text" id="inp3"><input type="button" value="改变宽度" id="btn3">
<input type="text" id="inp4"><input type="button" value="改变高度" id="btn4">
<script>
var oBox = document.getElementById('box');
var oInp1 = document.getElementById('inp1');
var oBtn1 = document.getElementById('btn1');
var oInp2 = document.getElementById('inp2');
var oBtn2 = document.getElementById('btn2');
var oInp3 = document.getElementById('inp3');
var oBtn3 = document.getElementById('btn3');
var oInp4 = document.getElementById('inp4');
var oBtn4 = document.getElementById('btn4');
//先给按钮绑定点击事件
oBtn1.onclick = function(){
//点击时,先获取输入框的值
var bg = oInp1.value;
oBox.style.backgroundColor = bg;
}
oBtn2.onclick = function(){
var cl=oInp2.value;
oBox.style.color=cl;
}
oBtn3.onclick = function(){
var wt=oInp3.value;
oBox.style.width=wt;
}
oBtn4.onclick = function(){
var ht=oInp4.value;
oBox.style.height=ht;
}
</script>
</body>
效果实现如下
1200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
