时间戳

首页 > 解决方案 > 在Javascript中单击按钮时更改边框高度

javascript - 在Javascript中单击按钮时更改边框高度

问题描述

每次按下按钮时，我都希望边框增加。

按下按钮时，其“值”增加 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>

我究竟做错了什么？我正在学习编码。另外，附带问题，有人知道一个好的指导计划吗？

问候！

标签： javascripthtmlcss

解决方案

您可以使用 offsetHeight 获取框的当前高度，然后单击将输入值添加到框的 style.height 并记住在最后添加单位 - 在您的情况下为“px”。这是一个例子：

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';
}

推荐阅读