gpt4 book ai didi

Javascript 调整

转载 作者:行者123 更新时间:2023-12-04 10:28:59 30 4
gpt4 key购买 nike

我是 Javascript 新手,所以请原谅基本代码。有什么方法可以让我使用用户输入的指定调整来打印代码?


<!DOCTYPE html>
<html lang="en">
<body>

<label for="height">height: </label>
<input id="height" type="number" min="100" max="600" step="1" value="100"/>

<label for="width">width: </label>
<input id="width" type="number" min="100" max="600" step="1" value="100"/>

<input id="sbutton" type="button" value="Adjust Size"/>

</body>
</html>

最佳答案

为按钮添加一个事件监听器,并从输入中获取宽度和高度。然后将样式(宽度和高度)应用于 div。

let divResize = document.getElementById('div-resize');

document.getElementById('size_btn').addEventListener('click', function() {

let height = document.getElementById('height').value;
let width = document.getElementById('width').value;

divResize.style.width = width + "px";
divResize.style.height = height + "px";

})
#div-resize {
width: 0px;
height: 0px;
border: 1px solid #000;
}
<label for="height">Height: </label>
<input id="height" type="number" min="100" max="600" step="1" value="100" />

<label for="width">Width: </label>
<input id="width" type="number" min="100" max="600" step="1" value="100" />

<input id="size_btn" type="button" value="Adjust Size" />


<div id="div-resize"></div>

关于Javascript 调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60499662/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com