我有两个按钮，一个是增加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传递到函数parm中来使用类似函数的示例。下面显示了每次调用时控件的展开和缩回：
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>我有两个按钮，一个是增加div元素的宽度，另一个是减小div的宽度，所以我该怎么做。这里的代码比我疯狂修改之前的代码更清晰]
<style>
</style>
<button id ="b">big</button>
<button id = "s">small</butto>
<div></div>
let btn1 = document.querySelector("#b");
btn1.addEventListener("click",function(b){
let add = 100;
let div = document.querySelector("div");
div.style.width = "300px";
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "350px";
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "400px";
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "450px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "500px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "550px";
})
})
})
})
let btn2 = document.querySelector("#s");
btn2.addEventListener("click",function(s){
let add = 100;
let div = document.querySelector("div");
div.style.width = "550px";
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "500px";
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "450px";
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "400px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "350px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "300px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "250px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "200px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "150px";
})
this.addEventListener("click",function(){
let div = document.querySelector("div");
div.style.width = "100px";
})
})
})
})
如果您有这个：
<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
将以下代码复制到您的页面上，看看发生了什么。它工作正常。
<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>