每次点击将宽度增加100px

Question

直截了当：当我单击按钮时， 我希望框的宽度在每次单击时增加100px 。 有人可以帮我实现这一目标吗？

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

您可以在下面找到代码。

 var content = document.getElementById("content"); var btn = document.getElementById("btn"); btn.addEventListener("click", function() { content.style.width = "400px"; }); 

 #content { width: 300px; height: 100px; background: lightblue; transition: all 1s ease-in-out; } #btn { width: 100px; height: 50px; background: grey; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; } a { color: white; text-decoration: none; } 

 <div id="content"></div> <div id="btn"><a href="#">Click</a></div> 

Answer 1

您可以使用width变量来保存和增加值：

 var content = document.getElementById("content"); var btn = document.getElementById("btn"); var width = 400; btn.addEventListener("click", function() { width += 100; content.style.width = width + "px"; }); 

 #content { width: 300px; height: 100px; background: lightblue; transition: all 1s ease-in-out; } #btn { width: 100px; height: 50px; background: grey; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; } a { color: white; text-decoration: none; } 

 <div id="content"></div> <div id="btn"><a href="#">Click</a></div> 

Answer 2

从内容中获取并重复使用

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

您的演示如下

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

 #content { width: 300px; height: 100px; background: lightblue; transition: all 1s ease-in-out; } #btn { width: 100px; height: 50px; background: grey; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; } a { color: white; text-decoration: none; } 

 <div id="content"></div> <div id="btn"><a href="#">Click</a></div> 

Answer 3

您只需要创建一个变量，每次单击按钮时该变量都会增加，并将其设置为宽度。 下面的代码将其编码为最终结果。 没有对HTML或CSS进行任何更改，仅对JavaScript进行了更改。 我创建了一个名为add的变量，它从300开始，然后每次单击该按钮时，add都会被添加100，然后显示出来。

 var content = document.getElementById("content"), btn = document.getElementById("btn"), add = 300; btn.addEventListener("click", function() { add+=100; content.style.width = add.toString()+"px"; }); 

 #content { width: 300px; height: 100px; background: lightblue; transition: all 1s ease-in-out; } #btn { width: 100px; height: 50px; background: grey; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; } a { color: white; text-decoration: none; } 

 <div id="content"></div> <div id="btn"><a href="#">Click</a></div> 

Answer 4

您可以使用以下命令：

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

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

 #content { width: 300px; height: 100px; background: lightblue; transition: all 1s ease-in-out; } #btn { width: 100px; height: 50px; background: grey; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; } a { color: white; text-decoration: none; } 

 <div id="content"></div> <div id="btn"><a href="#">Click</a></div> 

Answer 5

在点击函数主体中使用offsetWidth代替content.style.width

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

Answer 6

您每次都设置宽度400px。 您需要先确定宽度，然后再将100 px添加到现有宽度。 例如：

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

请通过下面的代码段。

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

 #content { width: 300px; height: 100px; background: lightblue; transition: all 1s ease-in-out; } #btn { width: 100px; height: 50px; background: grey; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; } a { color: white; text-decoration: none; } 

 <div id="content"></div> <div id="btn"><a href="#">Click</a></div>