如何使用 JS 和 CSS 對 HR 標簽（水平線）進行動態效果？

Question

我想用CSS & JS和HR HTML元素制作動態效果：這個想法是像這樣水平制作 4 行：
並通過添加類型范圍的輸入使其動態化，並根據輸入范圍的值使它們在寬度上增長和縮小！
到目前為止我已經嘗試過：

 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 ; 歡迎提出任何建議並更加感謝！

Answer 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查看

Answer 2

根據您的 js 代碼行寬度只會增加，而與 slider 值無關。

嘗試給定的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);
  });

diffValue 用於通過先前值和當前值的差來增加或減少行大小。 例如，當前值為 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;
}