Heim > Web-Frontend > js-Tutorial > So ändern Sie die Hintergrundfarbe mit Javascript

So ändern Sie die Hintergrundfarbe mit Javascript

醉折花枝作酒筹
Freigeben: 2021-06-15 10:46:25
Original
3800 Leute haben es durchsucht

In JavaScript können Sie das Stilobjektattribut verwenden, um die Hintergrundfarbe zu ändern. Das Syntaxformat ist „element object.style.background="color value"". Das Style-Objekt stellt eine einzelne Stildeklaration dar und kann über das Dokument oder Element, auf das der Stil angewendet wird, aufgerufen werden.

So ändern Sie die Hintergrundfarbe mit Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

<html>
  <head></head>
  <body>
    <ul id="ul1">
      <li></li>
      <li></li>
      <li></li>
      <li class="box"></li>
      <li></li>
      <li class="box"></li>
      <li class="box"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>
<script>
  window.onload = function () {
    //获取名字ul1的ID
    var oUl = document.getElementById("ul1");
    //获取li标签
    var aLi = oUl.getElementsByTagName("li");
    //循环li
    for (var i = 0; i < aLi.length; i++) {
      //判断li标签名字为className为box
      if (aLi[i].className == "box") {
        //给li标签加背景色
        aLi[i].style.background = "red";
      }
    }
  };
</script>
Nach dem Login kopieren

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Hintergrundfarbe mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Aktuelle Ausgaben
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage