如何使用 JS 和 CSS 对 HR 标签（水平线）进行动态效果？答案

【问题标题】：How can I make a dynamic effects on HR tag(horizontal line) with JS and CSS?如何使用 JS 和 CSS 对 HR 标签（水平线）进行动态效果？
【发布时间】：2022-01-22 17:43:16
【问题描述】：

我想用 CSS & JS 和 HR HTML 元素制作动态效果：这个想法是像这样水平制作 4 行：
并通过添加 range 类型的输入 使其动态化，并根据 input range 的值使它们在宽度上增长和缩小！
到目前为止我尝试过的：

document
  .querySelector('input[type="range"]')
  .addEventListener("input", (e) => {
    document.querySelectorAll(".line").forEach((line) => {
      line.style.width = line.offsetWidth + 10 + "px";
      const marginOnLeft = window
        .getComputedStyle(line)
        .getPropertyValue("margin-left")
        .slice(0, -2); //remove "px"
      line.style.marginLeft =
        Number(marginOnLeft) + 100 / Number(marginOnLeft) + "px";
    });
  });

.lines {
  position: relative;
}
.line {
  position: absolute;
}
hr {
  background-color: black;
  border-radius: 5px;
}
.line1 {
  width: 500px;
  height: 3px;
  margin-left: 0;
  margin-top: 5px;
}
.line2 {
  width: 400px;
  height: 6px;
  margin-left: 50;
  margin-top: 5px;
}
.line3 {
  width: 300px;
  height: 8px;
  margin-left: 100;
  margin-top: 5px;
}
.line4 {
  width: 200px;
  height: 10px;
  margin-left: 150;
}
input[type="range"] {
  margin-top: 70px;
}

<div class="lines">
  <hr class="line line1" />
  <hr class="line line2" />
  <hr class="line line3" />
  <hr class="line line4" />
</div>
<div>
  <input type="range" name="" id="" value="10" />
</div>

如何跟踪用户的input range增加或减少；根据其值所有水平线将动态变宽或变窄！更重要的是，我会根据input range value 动态地增加或减少margin-left，我做得对还是使用CSS variables；欢迎提出任何建议并更加感谢！

【问题讨论】：

标签： javascript html css margin css-variables

【解决方案1】：

做一些小改动 -

  var oldValue = 10;
document
  .querySelector('input[type="range"]')
  .addEventListener("input", (e) => {
    document.querySelectorAll(".line").forEach((line) => {
      if(parseInt(e.target.value) > oldValue){
            line.style.width = parseInt(line.offsetWidth) + parseInt(e.target.value) + "px";
        }else{
            line.style.width = parseInt(line.offsetWidth) - parseInt(e.target.value) + "px";
        }
    });
    oldValue = e.target.value;
  });

从 CSS 中移除

.line {
  position: absolute;
}

更新css

.line2 {
  width: 400px;
  height: 6px;
  position: absolute;
  top: -1px;
  left:50px;
  background:green;
}
.line3 {
  width: 300px;
  height: 8px;
  position: absolute;
  top: -2px;
  left:100px;
  background:green;
}
.line4 {
  width: 200px;
  height: 10px;
  position: absolute;
  top: -3px;
  left:150px;
  background:green;
}

点击JSfiddle查看

【讨论】：

如果通过 currentValue 增加或减少行数，它不会给出预期的结果。例如：如果我的滑块位于 10 并且我将其移动到 0。线条的宽度将保持不变。
好的，谢谢..

【解决方案2】：

根据您的 js 代码行宽度只会增加，而与滑块值无关。

尝试给定的js

var previousValue = 10;
document
  .querySelector('input[type="range"]')
  .addEventListener("input", (e) => {
    document.querySelectorAll(".line").forEach((line) => {
      if(parseInt(e.target.value) > previousValue){
        difValue = parseInt(e.target.value) - previousValue;
        line.style.width = line.clientWidth + difValue + "px";
        }else{
            difValue = previousValue - parseInt(e.target.value);
                    line.style.width = line.clientWidth - difValue + "px";
        }
    });
    previousValue = parseInt(e.target.value);
  });

difValue 用于通过先前值和当前值的差来增加或减少行大小。例如当前值为 10 之前的值为 8 所以线的大小应该增加 2 即 10-8

您可以将您的 css 更新为

.lines {
  position: relative;
  text-align: center;
  width: 500px;
  height: 50px;
  box-sizing: border-box;
}
.line {
  position: absolute;
}
hr {
  background-color: black;
  border-radius: 5px;
}
.line1 {
  width: 500px;
  min-width: 490px;
  height: 3px;
}
.line2 {
  width: 400px;
  min-width: 390px;
  height: 6px;
  top: -1px;
  left:50px;
}
.line3 {
  width: 300px;
  min-width: 290px;
  height: 8px;
  top: -2px;
  left:100px;
}
.line4 {
  width: 200px;
  min-width: 190px;
  height: 10px;
  top: -3px;
  left:150px;
}
input[type="range"] {
  margin-top: 70px;
}

【讨论】：