使元素变宽，然后在达到某个点时变窄答案

【问题标题】：Make element wider, then narrower when certain point is reached使元素变宽，然后在达到某个点时变窄
【发布时间】：2019-09-11 16:21:04
【问题描述】：

直截了当：现在每一次按钮点击都会使 content-div 变宽 100 像素。起点是 300 像素，在 600 像素中，当用户点击按钮时，宽度应该回到 300 像素。

清除：我不希望宽度直接变为 600px，然后在下次单击时返回到 300px，模式应该类似于 单击 1。+100px，单击 2。+100px，单击 3 .+100px，点击4.-300px ..然后重新开始。

我尝试应用 else if 语句，但由于某种原因，div 元素在每次点击时都会变宽，但当它变得超过 600 像素时，else if 语句将不适用。

var content = document.getElementById("content");
var btn = document.getElementById("btn");
content.style.width = "300px";
btn.addEventListener("click", function() {
if (content.style.width >= "300px") {
content.style.width = content.offsetWidth + 100 + "px"; }
else if (content.style.width >= "600px") {
content.style.width = content.offsetWidth - 300 + "px"; } 
});

#content {
width: 300px;
height: 100px;
background: lightblue;
display: flex;
align-items: center; justify-content: center;
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>

【问题讨论】：

content.style.width 是一个字符串。最好的做法是使用offsetWidth 获取元素的宽度，然后将其与数字进行比较。

标签： javascript css

【解决方案1】：

应该这样做：

  if (content.offsetWidth < 600) {
    content.style.width = content.offsetWidth + 100 + "px"; 
  }
  else {
    content.style.width = content.offsetWidth - 300 + "px"; 
  }

var content = document.getElementById("content");
var btn = document.getElementById("btn");
content.style.width = "300px";
btn.addEventListener("click", function() {
  if (content.offsetWidth < 600) {
    content.style.width = content.offsetWidth + 100 + "px"; 
  }
  else {
    content.style.width = content.offsetWidth - 300 + "px"; 
  } 
});

#content {
width: 300px;
height: 100px;
background: lightblue;
display: flex;
align-items: center; justify-content: center;
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>

【讨论】：

太棒了！谢谢。

【解决方案2】：

var content = document.getElementById("content");
var btn = document.getElementById("btn");
content.style.width = "300px";
btn.addEventListener("click", function() {
if (content.style.width >= "600px") {
  content.style.width = content.offsetWidth - 300 + "px";
  return;
}
content.style.width = content.offsetWidth + 100 + "px";
});

#content {
width: 300px;
height: 100px;
background: lightblue;
display: flex;
align-items: center; justify-content: center;
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>

【讨论】：