使用js设置元素自适应

时间:2026-02-11 20:46:09

1、通过使用js获取到父元素的宽和高,在设置子元素的宽高(例子元素是父元素宽高的 0.8)

使用js设置元素自适应

2、代码和效果图:

<!DOCTYPE>


<html>
   <head>
       <meta charset="utf-8"/>
       <title>使用js设置元素自适应</title>
       <script src="jquery.min.js"></script>
       <style>
           .container{
               width:500px;
               background: #b1d9dd;
               border: 1px solid #333;
               height:200px;
           }
           .box{
               background: #000;
           }
       </style>
   </head>
   <body>
       <div class="container">
           <div class="box"></div>
       </div>
   <script>
//        js设置元素自适应
       $(function(){
//            获取父元素宽、高
           var w = $('.container').width();
//
           var h = $('.container').height();
           设置元素的宽和高
           $('.box').width(w*0.8);
           $('.box').height(h*0.8);
       })
   </script>
   </body>
</html>

使用js设置元素自适应

© 2026 一点知道
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com