我有两个按钮，一个是增加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>在每个按钮上单击调用一个JavaScript函数。我那个功能你改变div宽度。我通过将控件的 ID 传递到函数参数中使用的类似函数的示例。下面显示了每次调用时展开和缩回的控件：
function collapseExpandMe(obj) {
var x = document.getElementById(obj);
if (x.style.width== "150px") {
x.style.width= "500px";
}
else {
x.style.width= "150px"
}
};
下面是一个带有注释的示例，解释了它是如何完成的;
// 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>如果你有这个：
<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"
});
代码笔中的完整示例：https://codepen.io/gmaslic/pen/GRRKyag?editors=1111
在您的页面上复制以下代码，看看发生了什么。它工作得很好。
<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>