Home > Article > Web Front-end > How to use JavaScript's % to change colors on alternate lines

How to use JavaScript's % to change colors on alternate lines

小云云Original: 2017-12-12 09:07:311738browse

This article mainly shares with you an example of using JavaScript's % to change colors on alternate lines. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

is as follows:

<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>

Have you learned it? Try it yourself.

Related recommendations:

How to calculate the length of an object in JavaScript

Detailed explanation of immediate execution function examples in JavaScript

How to call class in JavaScript

The above is the detailed content of How to use JavaScript's % to change colors on alternate lines. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how to use ES6 to implement the singleton pattern and its applicationsNext article：Detailed explanation of how to use ES6 to implement the singleton pattern and its applications

See more

How to use JavaScript's % to change colors on alternate lines

Related articles