Question

我有两个按钮，一个是增加div元素的宽度，另一个是减小div的宽度，所以我该怎么做。

let btn1 = document.querySelector("#increase");
btn1.addEventListener("click", function(event) {
  let add = 100;
  let div = document.querySelector("div");
  // I am trying to add width to div every time I click
  let c = div.style.width = `300px`;
  c = c++;
})

let btn2 = document.querySelector("#decrease");
btn1.addEventListener("click", function(event) {
  let add = 100;
  let div = document.querySelector("div");
  // I am trying to decrease width to div every time I click
  let c = div.style.width = `300px`;
  c = c--;
})

<button id="b">big</button>
<button id="s">small</butto>
<div></div>

Answer 1

在每个按钮上单击以调用javascript函数。在该函数中，您可以更改div宽度。我通过将控件的ID传递到函数parm中来使用类似函数的示例。下面显示了每次调用时控件的展开和缩回：

    function collapseExpandMe(obj) {
        var x = document.getElementById(obj);

        if (x.style.width== "150px") {
            x.style.width= "500px";

        }
        else {
            x.style.width= "150px"
        }




    };

Answer 2

这是一个带有注释的示例，解释了如何完成；

// redeclared these as const because they wont change
const btn1 = document.querySelector("#increase");
const btn2 = document.querySelector("#decrease");
// here is a variable to indicate how much to increase or decrease the divs width
const increment = 100;
// here I am storing a reference to the div so i don't have to constantly look it up
const targetDiv = document.getElementById('sample')

// The increase handler
btn1.addEventListener("click", function(event) {
  // calculate the current width
  let currentWidth = window.getComputedStyle(targetDiv).width;
  // styles need the trailing 'px' and they come back with it, so we can drop the px by using parseInt
  // we add the 'px' back in the template 
  targetDiv.style.width = `${parseInt(currentWidth, 10) + increment}px`;
  // no need for the c variable
})

btn2.addEventListener("click", function(event) {
  // calculate the current width
  let currentWidth = window.getComputedStyle(targetDiv).width;
  // styles need the trailing 'px' and they come back with it, so we can drop the px by using parseInt
  // we add the 'px' back in the template 
  targetDiv.style.width = `${parseInt(currentWidth, 10) - increment}px`;
  // no need for the c variable
})

#sample {
  border: 1px solid black;
  background-color: red;
  display: inline-block;
}

<!-- Your button id's didn't match what you were looking up so I updated them here -->
<button id="increase">increase</button>
<button id="decrease">decrease</button>
<!-- I added this just for some simple formatting -->
<br />
<!-- I gave the element an ID to be able to specifically target it -->
<!-- I also added a style and some content so you can see the div -->
<div id="sample">
Content
</div>

Answer 3

如果您有这个：

<button id="increase">big</button>
<button id="decrease">small</button>
<div id="this-div"></div>

然后，您可以将事件侦听器附加到这两个按钮上。您还需要读取div元素的当前宽度，才能计算出新的宽度。

因此，您需要首先从要使用的页面中获取所有元素：

const divElement =  document.querySelector("#this-div");
const btn1 = document.querySelector("#increase");
const btn2 = document.querySelector("#decrease");

此后，您需要附加事件侦听器。

btn1.addEventListener("click", () => {
   divElement.style.width = divElement.offsetWidth + 10 + "px"
});
btn2.addEventListener("click", () => {
  divElement.style.width = divElement.offsetWidth - 10 + "px"
});

codepen中的完整示例：https://codepen.io/gmaslic/pen/GRRKyag?editors=1111

Answer 4

将以下代码复制到您的页面上，看看发生了什么。效果很好。

<html>

<head>
</head>

<body>


   <button id="increase">big</button>
   <button id="decrease">small</button>
   <div id="my_div" style="width: 20px;height: 100px; background-color: red"></div>
   <script>

      let incresingValue = 20;

      function incresingDiv() {
         incresingValue += 10;
         document.getElementById("my_div").style.height = 100;
         document.getElementById("my_div").style.width = incresingValue;    
      }

      function decresingDiv() {
         incresingValue -= 10;
         document.getElementById("my_div").style.height = 100;
         document.getElementById("my_div").style.width = incresingValue;   
      }

      document.getElementById("increase").addEventListener('click', incresingDiv);
      document.getElementById("decrease").addEventListener('click', decresingDiv);


   </script>

</body>

</html>

我想在每次点击时增加div的宽度

4 个答案: