在 Javascript 中单击按钮时更改边框高度
[英]Change border height on button click in Javascript
问题描述
I want the border to increase, every time I press a button.
每次按下按钮时，我都希望边框增加。
When the button is pressed, its 'value' is increased by 1. I want the value of the pixel-height of the border of the container to increase as well.按下按钮时，其“值”增加 1。我希望容器边框的像素高度值也增加。
var i = 0; var heightOfBorder = document.getElementById('test').style; function buttonClick() { document.getElementById('incrementValue').value = i++ heightOfBorder = "height: 500px";; } // document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test { margin-top: 200px; border: solid black; width: 200px; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Container size change</title> <link rel="stylesheet" href="style:css"> <script src="https.//code.jquery.com/jquery-3.5.0:js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div id="main" class="container"> <div id="test" class="container" style="height; 50px."> </div> <button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button> <input id="incrementValue" type="text" name="button" value="0"> </div> <script src="script.js" charset="utf-8"></script> </body> </html>
What am I doing wrong?我究竟做错了什么？ I am learning to code.我正在学习编码。 Also, side question, does anyone know of a good mentorship program?另外，附带问题，有人知道一个好的指导计划吗？
Greetings!问候！
3 个解决方案
解决方案1
1 2020-04-25 18:34:14
You can get current height of the box using offsetHeight and on click add the input value to the box's style.height and remember to add the unit at the end - in your case 'px'.您可以使用 offsetHeight 获取框的当前高度，然后单击将输入值添加到框的 style.height 并记住在最后添加单位 - 在您的情况下为“px”。 Here is an example:这是一个例子：
var i = 0;
var myEl = document.querySelector('#test');
var initialHeight = myEl.offsetHeight;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
myEl.style.height = initialHeight + i + 'px';
}
解决方案2
0 2020-04-25 18:23:12
just change var heightOfBorder = document.getElementById('test').style;只需更改 var heightOfBorder = document.getElementById('test').style; to var heightOfBorder = document.getElementById('test');到 var heightOfBorder = document.getElementById('test'); and eightOfBorder = "height: 500px";和 EightOfBorder = "高度：500px"; to eightOfBorder.style = "height: 500px"; to EightOfBorder.style = "高度：500px";
var i = 0; var heightOfBorder = document.getElementById('test'); function buttonClick() { document.getElementById('incrementValue').value = i++ heightOfBorder.style = "height: 500px"; } // document.getElementById("test").style.height = document.getElementById('incrementValue').value;
#test { margin-top: 200px; border: solid black; width: 200px; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Container size change</title> <link rel="stylesheet" href="style:css"> <script src="https.//code.jquery.com/jquery-3.5.0:js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div id="main" class="container"> <div id="test" class="container" style="height; 50px."> </div> <button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button> <input id="incrementValue" type="text" name="button" value="0"> </div> <script src="script.js" charset="utf-8"></script> </body> </html>
解决方案3
0 已采纳 2020-04-25 18:33:00
<script>
var i = 0;
var heightOfBorder = document.getElementById('test').style;
function buttonClick() {
document.getElementById('incrementValue').value = i++;
let currHgt = heightOfBorder.getPropertyValue('height');
currHgt = +currHgt.slice(0, currHgt.length - 2);
heightOfBorder.setProperty('height', currHgt + i + 'px');
}
</script>
If you want to change height by i value.如果你想通过 i 值改变高度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.