输入值时如何更改搜索文本的颜色[重复]

Question

有没有什么方法可以让用户在搜索框中输入任何值，然后颜色就会改变。

像这样：
用户输入：笔记本电脑
然后laptop颜色从class="deviceNameCardHead"变化

我做了一个搜索框，但不知道如何更改搜索项的颜色

function refree() {
  var reed = document.getElementById("search").value;
  var reed1 = reed.toLowerCase();
  var reader = document.getElementsByClassName("deviceNameCardHead")

  for (let i = 0; i < reader.length; i++) {
    if (reader[i].innerHTML.toLowerCase().indexOf(reed1) > -1) {
      document.getElementById("demo").innerHTML = "Yes";
      document.getElementById("demo1").innerHTML = " - "+ reed1;
      reader[i].parentElement.style.display = "block";
    } else {
      document.getElementById("demo").innerHTML = "No";
      document.getElementById("demo1").innerHTML = "-"+ reed1;
      reader[i].parentElement.style.display = "none";
    }
  }

}

<div id="devicesBtnData">
  <div class="searchDevice">
    <span class="searchDeviceBtn">Search Device</span>
    <input id="search" type="search" placeholder="Try it" oninput="refree()">
    <br>
    <span id="demo"></span>
    <span id="demo1"></span>
  </div>

  <div class="deviceNameCard">
    <h3 class="deviceNameCardHead">Lenova Yoga Laptop Pro</h3>
  </div>

</div>

Answer 1

我认为你正在尝试这样做：-

function refree() {
  var reed = document.getElementById("search").value;
  var reed1 = reed.toLowerCase();
  var reader = document.getElementsByClassName("deviceNameCardHead")

  for (let i = 0; i < reader.length; i++) {
    if (reader[i].innerHTML.toLowerCase().indexOf(reed1) > -1) {
      document.getElementById("demo").innerHTML = "Yes";
      document.getElementById("demo1").innerHTML = " - " + reed1;
      reader[i].parentElement.style.display = "block";
      reader[i].parentElement.classList.add("mystyle");
    } else {
      document.getElementById("demo").innerHTML = "No";
      document.getElementById("demo1").innerHTML = "-" + reed1;
      reader[i].parentElement.style.display = "none";
      reader[i].parentElement.classList.remove("mystyle");
    }
  }

}

.mystyle {
  color: red;
}

<div id="devicesBtnData">
  <div class="searchDevice">
    <span class="searchDeviceBtn">Search Device</span>
    <input id="search" type="search" placeholder="Try it" oninput="refree()">
    <br>
    <span id="demo"></span>
    <span id="demo1"></span>
  </div>

  <div class="deviceNameCard">
    <h3 class="deviceNameCardHead">Lenova Yoga Laptop Pro</h3>
  </div>

</div>

Answer 2

当然，在我看来，用 flexbox 制作导航栏是最好的方法。

1. 您唯一需要做的就是将它们分开。因此，您必须将Cancel & Apply 放在名为.filterCA 的父元素中，并将.filterBottomBtns 与space-between 对齐。 （我将 display flex 赋予 .filterCA 以使按钮内联）。

2. 您也可以将margin-right: auto 分配给Reset，它会与右侧分开并粘在左侧。

.filterBottomBtns {
  position: sticky;
  display: flex;
  /* EDITED HERE */
  justify-content: space-between;
  align-items: center;
  width: 100%;
  bottom: 0;
  padding: 2%;
  border-radius: 0 0 5px 5px;
  background-color: white;
  border-top: 1px solid rgb(209, 208, 208);
}

.filterReset {
  font-size: 16px;
  /*
  margin-right: auto;
  */
  margin-left: 5%;
  padding: 6px 20px;
  border: 1px solid white;
  border-radius: 3px;
  background-color: white;
  color: rgb(13, 113, 121);
}

.filterReset:hover {
  background-color: rgb(18, 192, 204, 0.3);
}

/* EDITED */
.filterCA {
  display: flex
}

.filterCancel {
  font-size: 16px;
  margin-right: 2%;
  padding: 6px 25px;
  border-radius: 3px;
  border: 1px solid rgb(216, 215, 215);
  background-color: white;
  color: rgb(13, 113, 121);
}

.filterCancel:hover {
  border: 1px solid rgb(100, 100, 100);
  background-color: rgb(18, 192, 204, 0.3);
}

.filterApply {
  margin-right: 5%;
  font-size: 16px;
  padding: 6px 25px;
  border: 1px solid rgb(18, 192, 204);
  border-radius: 3px;
  background-color: rgb(18, 192, 204);
  color: white;
}

.filterApply:hover {
  border: 1px solid rgb(15, 128, 136);
  background-color: rgb(15, 128, 136);
}

<div class="filterBottomBtns">
  <button type="reset" class="filterReset">Reset</button>
  <div class="filterCA">
    <button class="filterCancel">Cancel</button>
    <button class="filterApply">Apply</button>
  </div>
</div>