如何使用 aa 文本框和 JavaScript 更改宽度和高度
[英]How to change width and height using a a textbox and JavaScript
问题描述
我想让用户有机会使用文本框和 JavaScript 更改宽度和高度
这就是 HTML 的样子和下面的代码
这是代码
let cardWidthInput = document.getElementById("card-width").value; let cardHeightInput = document.getElementById("card-height").value; document.getElementById("card").style.width = cardWidthInput; document.getElementById("card").style.width = cardHeightInput;
.card { height: 450px; width: 300px; }
<body> <:-- Card Properties --> <div class="propiedades"> <:-- New Card Button --> <div class="btn-nueva-carta"> <button type="button" id="newCard" onclick="newCard()"> Nueva Carta </button> </div> <!-- Card size input boxes --> <div class="inputs"> <!-- Card Width --> <div class="card-width"> <label for="card-width">width: </label> <input type="text" id="card-width" name="card-width" /> </div> <!-- Card height --> <div class="card-height"> <label for="card-height">height: </label> <input type="text" id="card-height" name="card-height" /> </div> <!-- Submit button from size controllers --> <input type="submit" value="Submit" id="bntSubmit" /> </div> </div> <!-- Game card --> <div class="card"> <div class="figura"></div> <div class="valor"></div> <div class="figura invertida"></div> </div> </body>请让我知道我做错了什么以及如何解决。 谢谢
2 个解决方案
解决方案1
0 2022-12-28 17:37:26
JavaScript 代码需要包装在由提交按钮调用的 function 中。
<input type="submit" value="Submit" id="bntSubmit" onclick="changeSize()" />
要通过 class 获取元素，您可以使用.querySelector() function。设置卡片的宽度和高度时，还需要包含“px”：
function changeSize() {
let cardWidthInput = document.getElementById("card-width").value + "px";
let cardHeightInput = document.getElementById("card-height").value + "px";
let card = document.querySelector(".card");
card.style.width = cardWidthInput;
card.style.height = cardHeightInput;
}
解决方案2
0 2022-12-28 18:13:37
如果您只想指定高度和字体大小，请使用 CSS 或样式属性，例如//在您的 CSS 文件或标签中 #textbold{height:200px;font-size:14pt;} <input id="textboxid".. .>
如何使用javascript中的变量更改DIV的宽度和高度？
[英]How to change the width and height of a DIV using variables in javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.