Javascript 每次单击时将宽度增加100像素

直截了当：当我单击按钮时，我希望每次单击时，框的宽度增加100px。有人能帮我做到这一点吗

当前，当单击按钮时，框的宽度变为400px，但我想在每次单击按钮时将宽度增加100px

您可以在下面找到代码

var content=document.getElementById（“content”）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，函数（）{
content.style.width=“400px”；
});
#内容{
宽度：300px；高度：100px；
背景：浅蓝色；
过渡：所有1都易于输入输出；
}
#btn{
宽度：100px；高度：50px；
背景：灰色；
显示器：flex；
对齐项目：居中；对齐内容：居中；
颜色：白色；
文字装饰：无；
}
a{
颜色：白色；
文字装饰：无；
}
您可以使用
width
变量保存并增加值：


var content=document.getElementById（“content”）；
var btn=document.getElementById（“btn”）；
var宽度=400；
btn.addEventListener（“单击”，函数（）{
宽度+=100；
content.style.width=宽度+px；
});
#内容{
宽度：300px；
高度：100px；
背景：浅蓝色；
过渡：所有1都易于输入输出；
}
#btn{
宽度：100px；
高度：50px；
背景：灰色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
文字装饰：无；
}
a{
颜色：白色；
文字装饰：无；
}
从内容中获取并重用它

content.style.width = content.offsetWidth + 100 + "px";

下面是您的演示


var content=document.getElementById（“content”）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，函数（）{
content.style.width=content.offsetWidth+100+“px”；
});
#内容{
宽度：300px；
高度：100px；
背景：浅蓝色；
过渡：所有1都易于输入输出；
}
#btn{
宽度：100px；
高度：50px；
背景：灰色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
文字装饰：无；
}
a{
颜色：白色；
文字装饰：无；
}
您只需创建一个变量，该变量在每次单击按钮时都会增加，并将其设置为宽度。下面的代码将显示最终结果。没有对HTML或CSS进行任何更改，只是对JavaScript进行了更改。我创建了一个名为add的变量，它从300开始，然后每次单击按钮时，add都会向其自身添加100，然后显示


var content=document.getElementById（“content”），btn=document.getElementById（“btn”），add=300；
btn.addEventListener（“单击”，函数（）{
相加+=100；
content.style.width=add.toString（）+“px”；
});
#内容{
宽度：300px；高度：100px；
背景：浅蓝色；
过渡：所有1都易于输入输出；
}
#btn{
宽度：100px；高度：50px；
背景：灰色；
显示器：flex；
对齐项目：居中；对齐内容：居中；
颜色：白色；
文字装饰：无；
}
a{
颜色：白色；
文字装饰：无；
}

您可以使用以下功能：

content.style.width = (content.offsetWidth) + 100 + "px";


var content=document.getElementById（“content”）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，函数（）{
content.style.width=（content.offsetWidth）+100+“px”；
});
#内容{
宽度：300px；高度：100px；
背景：浅蓝色；
过渡：所有1都易于输入输出；
}
#btn{
宽度：100px；高度：50px；
背景：灰色；
显示器：flex；
对齐项目：居中；对齐内容：居中；
颜色：白色；
文字装饰：无；
}
a{
颜色：白色；
文字装饰：无；
}
在单击函数体中使用
offsetWidth
而不是content.style.width

btn.addEventListener("click", function() {
    content.style.width = (content.offsetWidth+100)+'px'
});

每次设置宽度为400px。您需要获取宽度，然后在现有宽度上再添加100像素。
例如：

var width1 = content.offsetWidth 
content.style.width= (width1+100)+"px";

请看下面的片段。
var content=document.getElementById（“content”）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，函数（）{
变量宽度1=content.offsetWidth
content.style.width=（width1+100）+“px”；
});
#内容{
宽度：300px；高度：100px；
背景：浅蓝色；
过渡：所有1都易于输入输出；
}
#btn{
宽度：100px；高度：50px；
背景：灰色；
显示器：flex；
对齐项目：居中；对齐内容：居中；
颜色：白色；
文字装饰：无；
}
a{
颜色：白色；
文字装饰：无；
}
非常简单！非常感谢。