Heim > Artikel > Web-Frontend > So verwenden Sie % von JavaScript, um die Farben in alternativen Zeilen zu ändern

So verwenden Sie % von JavaScript, um die Farben in alternativen Zeilen zu ändern

小云云Original: 2017-12-12 09:07:311737Durchsuche

Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel für die Verwendung von JavaScript zum Ändern von Farben in alternativen Zeilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

lautet wie folgt:

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
 li {
  list-style-type: none;
  width: 300px;
  height: 30px;
 }
</style>
</head>

<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
 var oli=document.getElementsByTagName(&#39;li&#39;);
 for(var i=0;i<oli.length;i++)
  {
   if(i%2==0)
    {
     oli[i].style.background=&#39;#F17B7D&#39;;
    }
   else
    {
     oli[i].style.background=&#39;#EDB461&#39;;
    }
  }
</script>
</body>
</html>

Haben Sie es gelernt? Probieren Sie es selbst aus.

Verwandte Empfehlungen:

So berechnen Sie die Länge eines Objekts in JavaScript

Detaillierte Erläuterung von Funktionsinstanzen mit sofortiger Ausführung in JavaScript

So rufen Sie Klassen in JavaScript auf

Das obige ist der detaillierte Inhalt vonSo verwenden Sie % von JavaScript, um die Farben in alternativen Zeilen zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Ausführliche Erläuterung, wie ES6 zum Implementieren des Singleton-Musters und seiner Anwendungen verwendet wirdNächster Artikel：Ausführliche Erläuterung, wie ES6 zum Implementieren des Singleton-Musters und seiner Anwendungen verwendet wird

In Verbindung stehende Artikel

Mehr sehen