javascript - Style for loop with CSS - Stack Overflow

admin管理员组

文章数量:1410724

Im supposed to make 8 boxes and style them each, make the boxes with for loop. Every odd box should look different then the others. I have tried to make an id, but when i use the id in CSS, it wont do anything. Can someone help?

Here is the code i have:

var text = "";
var i;
for (i = 1; i < 10; i++) {
  text += "Box number " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

.demo {
  border: black;
}

<p id="demo"></p>

Im supposed to make 8 boxes and style them each, make the boxes with for loop. Every odd box should look different then the others. I have tried to make an id, but when i use the id in CSS, it wont do anything. Can someone help?

Here is the code i have:

var text = "";
var i;
for (i = 1; i < 10; i++) {
  text += "Box number " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

.demo {
  border: black;
}

<p id="demo"></p>

• javascript
• html
• css
• loops

Share Improve this question Follow edited Oct 10, 2018 at 10:44 user5734311 asked Oct 10, 2018 at 10:34 KX0KX0 9911 gold badge33 silver badges1111 bronze badges 6

• This is question for JavaScript, not Java. – user987339 Commented Oct 10, 2018 at 10:35
• You can probably try out straight CSS with :nth-child(odd) to color odd elements. developer.mozilla/en-US/docs/Web/CSS/:nth-child – Kamil Jarosz Commented Oct 10, 2018 at 10:37
• .demo selects all elements that have class="demo". For id="demo" you need #demo. You'll also want to create eight elements (your code creates 9 text nodes). Example: jsfiddle/khrismuc/2cd98n3L – user5734311 Commented Oct 10, 2018 at 10:40
• Possible duplicate of How do I select every other div class element using just CSS (no js) – user5734311 Commented Oct 10, 2018 at 10:46
• You can not “style a for loop”, that makes no sense. You are not creating any “boxes” right now, you are outputting pure text. So, start by making your loop output an HTML element for each item. – misorude Commented Oct 10, 2018 at 10:57

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

As volodymyr says use css nth-child property.

In javascript you can acplish this in the following manner:

for(let i = 0; i < document.querySelectorAll('.class').length; i += 2){
  document.querySelectorAll('.class')[i].style.color = 'red';
}

   <div class="class">1</div>
    <div class="class">2</div>
    <div class="class">3</div>
    <div class="class">4</div>
    <div class="class">5</div>
    <div class="class">6</div>
    <div class="class">7</div>
    <div class="class">8</div>
    <div class="class">9</div>
    <div class="class">10</div>

This uses a for loop which iterates over every odd element, and then applies styles via javascript. Usually a pure CSS implementation would be preferable though.

You can use css nth-clild property

.class:nth-child(odd) {background: red}

    <div class="class">1</div>
    <div class="class">2</div>
    <div class="class">3</div>
    <div class="class">4</div>
    <div class="class">5</div>
    <div class="class">6</div>
    <div class="class">7</div>
    <div class="class">8</div>
    <div class="class">9</div>
    <div class="class">10</div>

Your css references the "class" demo selector but your HTML uses an "id" property id='demo'. Change either one to match the other.

本文标签： javascriptStyle for loop with CSSStack Overflow