用JS 点击按钮改变宽高！ 往大神赐教啊！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JS 点击按钮改变宽高！ 往大神赐教啊！相关的知识，希望对你有一定的参考价值。
<!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>
<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>
纯手打, 可用. 参考技术B 你的意思是想在点击改变按钮之后红色的正方形改变宽跟高吗？
就只说一下点击事件的代码吧：
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了 求代码
参考技术C 获取这个红色框的元素，输入框的元素，然后利用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";
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';
纯手打望采纳谢谢。本回答被提问者采纳 第5个回答 2018-06-27 <!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>
怎么用js点击按钮改变网页主题，就是把颜色换一下，再次点击在换回来，就这样点击来回切换？
参考技术A <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
background-color: green;
</style>
</head>
<body>
<button>btn</button>
</body>
<script>
let isGreen = false;
document.querySelector("button").onclick = () =>
document.body.style.backgroundColor = isGreen ? "green" : "red"
isGreen = !isGreen;
</script>
</html>
请采纳
追问你这个只是点击切换，我的意思是点击切换然后再点击又切换原来的颜色去了，就这样可以一直切换
以上是关于用JS 点击按钮改变宽高！ 往大神赐教啊！的主要内容，如果未能解决你的问题，请参考以下文章