js遍历div中的id并对id样式进行操作

本文通过具体的HTML代码示例,展示了如何使用JavaScript来动态控制网页中元素的显示与隐藏,特别关注于超过特定数量的元素如何被自动隐藏,为网页设计提供了实用的技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>乐网</title> 
</head>
<body>

 

    <p id="demo1">1</p>
    <p id="demo2">2</p>
    <p id="demo3">3</p>
    <p id="demo4">4</p>
    <p id="demo5">5</p>
    <p id="demo6">6</p>
    <p id="demo7">7</p>
    <p id="demo8">8</p>
<script>

    for (var i=1;i<9;i++){

if(i>5){document.getElementById("demo"+i).style.display="none";}

}
    </script>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>乐网</title> 
</head>
<body>

 <div id="demo1">01题:
     <input type="text" name="d1t" value=""/>
  </div>

 <div id="demo2">02题: 
      <input type="text" name="d2t" value=""/>
  </div>

 <div id="demo3">03题:
      <input type="text" name="d3t" value=""/>
  </div>

 <div id="demo4">04题:
       <input type="text" name="d4t" value=""/>
  </div>

 <div id="demo5">05题:
    <input type="text" name="d5t" value=""/>
 </div>

 <div id="demo6">06题:
      <input type="text" name="d6t"value="" />
  </div>

 <div id="demo7" >07题:
      <input type="text" name="d7t" value=""/>
  </div>

 <div id="demo8" >08题:
       <input type="text" name="d8t" value=""/>
  </div>

 <div id="demo9" >09题:
       <input type="text" name="d9t" value=""/>
  </div>

 <div  id="demo10">10题:
    <input type="text" name="d10t" value=""/>
  </div>  
 <div id="demo11" >11题:
     <input type="text" name="d11t" value=""/>
  </div>

 <div id="demo12">12题: 
      <input type="text" name="d12t"value="" />
  </div>

 <div id="demo13">13题:
      <input type="text" name="d13t" value=""/>
  </div>

 <div id="demo14">14题:
       <input type="text" name="d14t" value=""/>
  </div id="demo1">

 <div id="demo15">15题:
    <input type="text" name="d15t" value=""/>
 </div>
 
 <div id="demo16" >16题:
     <input type="text" name="d16t" value=""/>
  </div>

 <div id="demo17">17题: 
      <input type="text" name="d17t" value=""/>
  </div>

 <div id="demo18">18题:
      <input type="text" name="d18t" value=""/>
  </div>

 <div id="demo19">19题:
       <input type="text" name="d19t" value=""/>
  </div>

 <div id="demo20">20题:
    <input type="text" name="d20t" value=""/>
 </div>

 <div id="demo21">21题:
      <input type="text" name="d21t"value="" />
  </div>

 <div id="demo22">22题:
      <input type="text" name="d22t" value=""/>
  </div>

 <div id="demo23" >23题:
       <input type="text" name="d23t" value=""/>
  </div>

 <div  id="demo24">24题:
       <input type="text" name="d24t" value=""/>
  </div>

 <div  id="demo25">25题:
    <input type="text" name="d25t" value=""/>
  </div>  
 <div  id="demo26">26题:
     <input type="text" name="d26t" value=""/>
  </div>

 <div id="demo27">27题: 
      <input type="text" name="d27t"value="" />
  </div>

 <div id="demo28">28题:
      <input type="text" name="d28t" value=""/>
  </div>

 <div id="demo29">29题:
       <input type="text" name="d29t" value=""/>
  </div>

 <div id="demo30">30题:
    <input type="text" name="d30t" value=""/>
 </div>
<script>

    for (var i=1;i<31;i++){

if(i>21){document.getElementById("demo"+i).style.display="none";}

}
    </script>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值