how to use for loop in javascript and how to call in css

Question

Hi I used this code to draw 12 lines, but now I want to use for loop and to call in CSS, please tell me how to use.

    <!DOCTYPE html>
<html>
<head>

<style>

#straight{
height: 30px;
border-right: 1px solid blue; 
-webkit-transform: rotate(deg);
transform: rotate(deg); 
position: absolute;
top:40px;
left:400px;
}





#circle {
  height: 30px;
  width: 31px;
  margin-left: 81px;
  margin-top: 0px;
  background-color: #fff;
  border: 2px solid blue;
  border-radius: 65px;
  position:absolute;

}





</style>

</head>

<body>



                    <div>

                        <div id="circle">                       
                             <div style="position:relative; top:-40px; left:-385px;">
                                <div id="straight"></div>

                         </div>
                    </div>




</body>
</html>

Tushar · Accepted Answer · 2015-07-09 12:31:19Z

1

Change the id to class

CSS:

.straight {
    height: 30px;
    border-right: 1px solid blue; 
    -webkit-transform: rotate(deg);
    transform: rotate(deg); 
    position: absolute;
    top:40px;
    left:400px;
}

Javascript:

for (var i = 0; i < 12; i++) {
    document.write('<hr class="straight" />');
}

answered Jul 9, 2015 at 12:31

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sam · Accepted Answer · 2015-07-09 12:42:44Z

1

css

.straight {
        height: 30px;
        border-right: 1px solid blue; 
        -webkit-transform: rotate(deg);
        transform: rotate(deg); 
        position: absolute;
        top:40px;
        left:400px;
    }

javascript

var str_div = '';
for (var i = 0; i < 12; i++) {
    str_div += '<div class="straight" >test</div>';
}
document.getElementById("idName").innerHTML = str_div;

in html body

<div id="idName"></div>

edited Jul 9, 2015 at 12:42

answered Jul 9, 2015 at 12:37

sam

3761 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

how to use for loop in javascript and how to call in css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related