如何在javascript中使用for循环以及如何在css中调用_Javascript_Html_Css

如何在javascript中使用for循环以及如何在css中调用

javascript html css

如何在javascript中使用for循环以及如何在css中调用,javascript,html,css,Javascript,Html,Css,嗨，我用这段代码画了12条线，但是现在我想用来循环和调用CSS，请告诉我如何使用 <!DOCTYPE html> <html> <head> <style> #straight{ height: 30px; border-right: 1px solid blue; -webkit-transform: rotate(deg); transform: rotate(deg); position: absolute; top:40px

嗨，我用这段代码画了12条线，但是现在我想用

来循环和调用CSS，请告诉我如何使用
    <!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>


#直的{
高度：30px；
右边框：1px纯蓝色；
-webkit变换：旋转（度）；
变换：旋转（度）；
位置：绝对位置；
顶部：40px；
左：400px；
}
#圈{
高度：30px；
宽度：31px；
左边距：81px；
边际上限：0px；
背景色：#fff；
边框：2件纯蓝；
边界半径：65px；
位置：绝对位置；
}
将id更改为类
CSS:
Javascript:
for (var i = 0; i < 12; i++) {
    document.write('<hr class="straight" />');
}

for（变量i=0；i<12；i++）{
文件。书写（“”）；
}
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;

var str_div=''；
对于（变量i=0；i<12；i++）{
str_div+=“测试”；
}
document.getElementById（“idName”）.innerHTML=str_div；

在html正文中
<div id="idName"></div>



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