使用Javascript按鈕更改ul的文本顏色-有解無憂

我需要創建一個按鈕來將我的 li 更改為黑色。

網頁格式

 <h2>Sonnenfarben</h2>
  <div class="box">
     
    <ul type="circle" class="liste2">
      <li class="farbeRot">rot</li>
      <li class="farbeOrange">orange</li>
      <li class="farbeGelb">gelb</li>
    </ul>
    
    <button onclick="changeColor()">Lights out</button>

  <ol class="liste3" start="3">
      <li class="farbeBraun">braun</li>
      <li class="farbeGrau">grau</li>
  </ol>

CSS

.farbeRot{
  color: ;
  font-weight: bold;
}

.farbeOrange{
  color: orange;
  font-style: italic;
}

.farbeGelb{
  color: yellow;
}

.farbeBraun{
  color: brown;
  font-style: italic;
}

.farbeGrau{
  color: grey;
  font-weight: bold;
}

.box{
  color: black;
}

function changeColor(){
  document.querySelector('.box').style.color = "black";
}

試圖連接一切，但沒有成功。

編輯：放入我已經定義的所有顏色。嘗試洗掉它們等，但仍然沒有用。

uj5u.com熱心網友回復：

您需要將.boxfrom的默認顏色更改black為其他值，例如紅色或綠色

.box{
  color: red;
}

function changeColor(){
  let lis = document.querySelectorAll('.liste2 > li,liste3 > li');
  for(let i=0;i<lis.length;i  ){
    lis[i].style.color = "black";
  }
}

.farbeRot{
  color: green;
  font-weight: bold;
}

.farbeOrange{
  color: orange;
  font-style: italic;
}

.farbeGelb{
  color: yellow;
}

.farbeBraun{
  color: brown;
  font-style: italic;
}

.farbeGrau{
  color: grey;
  font-weight: bold;
}

.box{
  color: black;
}

<h2>Sonnenfarben</h2>
  <div class="box">
     
    <ul type="circle" class="liste2">
      <li class="farbeRot">rot</li>
      <li class="farbeOrange">orange</li>
      <li class="farbeGelb">gelb</li>
    </ul>
   

  <ol class="liste3" start="3">
      <li class="farbeBraun">braun</li>
      <li class="farbeGrau">grau</li>
  </ol>
  
   <button onclick="changeColor()">Lights out</button>
</div>

uj5u.com熱心網友回復：

如果你只是想通過點擊事件改變你的 li 的顏色，不要手動（幾乎）這樣做。為您的 ul 撰寫一個 CSS 樣式的類并在點擊事件上切換它

function changeColor() {
  const liste2 = document.querySelector(".liste2");
  liste2.classList.toggle("black-ul")
  
  /*
  if you just want the lights off and not toggle, replace above "toggle" with "add"
  simple javascript my boy
  */
  
}

.farbeRot{
  color: green;
  font-weight: bold;
}

.farbeOrange{
  color: orange;
  font-style: italic;
}

.farbeGelb{
  color: pink;
}

.farbeBraun{
  color: brown;
  font-style: italic;
}

.farbeGrau{
  color: grey;
  font-weight: bold;
}

.box{
  color: black;
}


/* below code is to make all the li black */

.black-ul > li {
  color: black
}

<div class="box">
     
    <ul type="circle" class="liste2">
      <li class="farbeRot">rot</li>
      <li class="farbeOrange">orange</li>
      <li class="farbeGelb">gelb</li>
    </ul>
    
    <button onclick="changeColor()">Toggle light</button>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535839.html

標籤：javascript网页格式CSShtml列表

上一篇：如何合并三個html元素

下一篇：React-移動到另一個html頁面-有條件的if