用JS 点击按钮改变宽高！ 往大神赐教啊！
<!doctypehtml><html><head><script>functioncheck(){}</script><metacharset="utf-8"><tit...
<!doctype html>
<html>
<head>
<script>
function check()
{}
</script>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="box" style="background:#F00; border:2px #000000 solid; height:100px;width:100px;"></div>
<input type="text" id="w">宽度<br>
<input type="text" id="h">高度<br>
<button onClick="check()">改变</button>
</body>
</html> 展开
<html>
<head>
<script>
function check()
{}
</script>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="box" style="background:#F00; border:2px #000000 solid; height:100px;width:100px;"></div>
<input type="text" id="w">宽度<br>
<input type="text" id="h">高度<br>
<button onClick="check()">改变</button>
</body>
</html> 展开
5个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
// 提交按钮时触发的函数
function subxxx() {
// 获取输入的高度
var hei = document.getElementById("hei").value;
// 获取输入的宽度
var wid = document.getElementById("wid").value;
// 改变div1的高度和宽度
document.getElementById("div1").style.height = hei+"px";
document.getElementById("div1").style.width = wid+"px";
}
</script>
<body>
<div id="div1" style="width: 50px; height: 50px; border: 1px solid red;"></div>
<br /><br /><br />
<form>
宽:<input type="text" name="wid" id="wid" />
高:<input type="text" name="hei" id="hei" />
<input type="button" value="提交" onclick="subxxx()" id="sub" />
</form>
</body>
</html>
纯手打, 可用.
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
// 提交按钮时触发的函数
function subxxx() {
// 获取输入的高度
var hei = document.getElementById("hei").value;
// 获取输入的宽度
var wid = document.getElementById("wid").value;
// 改变div1的高度和宽度
document.getElementById("div1").style.height = hei+"px";
document.getElementById("div1").style.width = wid+"px";
}
</script>
<body>
<div id="div1" style="width: 50px; height: 50px; border: 1px solid red;"></div>
<br /><br /><br />
<form>
宽:<input type="text" name="wid" id="wid" />
高:<input type="text" name="hei" id="hei" />
<input type="button" value="提交" onclick="subxxx()" id="sub" />
</form>
</body>
</html>
纯手打, 可用.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的意思是想在点击改变按钮之后红色的正方形改变宽跟高吗？
就只说一下点击事件的代码吧：
function check(){
var weight = document.getElementById("w")value;
var height= document.getElementById("h").value;
document.getElementById("box").stytle.weight=weight +"px";
document.getElementById("box").stytle.weight=height+"px";
}
代码大概就是这样，没测试过，你自己试一试改一改吧。不懂再问我
就只说一下点击事件的代码吧：
function check(){
var weight = document.getElementById("w")value;
var height= document.getElementById("h").value;
document.getElementById("box").stytle.weight=weight +"px";
document.getElementById("box").stytle.weight=height+"px";
}
代码大概就是这样，没测试过，你自己试一试改一改吧。不懂再问我
追问
就是在高和宽里面输入任意数值 点改变 图形就变成你想要的 比如高200 宽200 点击改变就变成高宽200了 求代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
获取这个红色框的元素，输入框的元素，然后利用ele.style.width=你获取到输入框的.value,利用onclick事件改变他们就好了呀
追问
能给下代码吗 谢谢了。
追答
function check(){
var box = document.getElementById("box");
var box_width = document.getElementById("w");
var box_height = document.getElementById("h");
box.style.width = box_width.value == ""?0:box_width.value + "px";
box.style.height= box_height.value == ""?0:box_height.value +"px";
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function check() {
var ele = document.getElementById('box'),
width = parseInt(document.getElementById('w').value),
height = parseInt(document.getElementById('h').value);
ele.style.width = width + 'px';
ele.style.height = height + 'px';
}
纯手打望采纳谢谢。
var ele = document.getElementById('box'),
width = parseInt(document.getElementById('w').value),
height = parseInt(document.getElementById('h').value);
ele.style.width = width + 'px';
ele.style.height = height + 'px';
}
纯手打望采纳谢谢。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script language="javascript">
function aa() {
document.getElementById("aa").style.width="500px";
}
function qq(){
document.getElementById("aa").style.height="500px";
}
function ww(){
document.getElementById("aa").style.background="blue";
}
function rr(){
document.getElementById("aa").style.display="none";
}
function tt(){
window.location.reload();
}
</script>
</head>
<body>
<input type="button" onclick="aa()" value="变宽"/>
<input type="button" onClick="qq()" value="变高"/>
<input type="button" onClick="ww()" value="变色"/>
<input type="button" onClick="rr()" value="隐藏"/>
<input type="button" onClick="tt()" value="重置"/>
<div id="aa" style="width:300px;height:300px; background:#000; border:1px solid #cccccc;"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script language="javascript">
function aa() {
document.getElementById("aa").style.width="500px";
}
function qq(){
document.getElementById("aa").style.height="500px";
}
function ww(){
document.getElementById("aa").style.background="blue";
}
function rr(){
document.getElementById("aa").style.display="none";
}
function tt(){
window.location.reload();
}
</script>
</head>
<body>
<input type="button" onclick="aa()" value="变宽"/>
<input type="button" onClick="qq()" value="变高"/>
<input type="button" onClick="ww()" value="变色"/>
<input type="button" onClick="rr()" value="隐藏"/>
<input type="button" onClick="tt()" value="重置"/>
<div id="aa" style="width:300px;height:300px; background:#000; border:1px solid #cccccc;"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
