django 前端使用js获取元素高度宽度等信息
1. 前端一般按照从上到下从左到右的顺序执行程序,因此引入js,css,等文件时候,使用class确认样式时候都要额外注意使用的顺序
2. 前端如果使用滑动需要设置 style="overflow: auto;" 但是貌似还需要设置高度,不然无法生效
3. 为了做到自适应,需要动态获取当前父类元素的宽高,并且给子类分配,此处使用js来实现这个功能具体代码如下
此处使用django的末班所以代码稍有不同 (注意js程序需要放置到html程序后面,不然会出现错误)
<div class="boxright box_height" style="overflow: hidden;" id="m2_head"> <!--此处使用bootstrap进行分割,两个高度都必须指定,后期可以使用js动态获取高度--> <div class="container-fluid bg-danger" > <div class="row bg-info row_box_height" style="overflow: auto;"> {% for i in count %} <h1 class="text-muted">哈哈哈哈哈</h1> {% endfor %} </div> <div class="row bg-warning row_box_height" style="overflow: auto;"> {% for i in count %} <h1 class="text-muted">test</h1> {% endfor %} </div> </div> </div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script> var boxs = document.getElementById('m2_head'); var Height = boxs.offsetHeight*0.5 ; console.log(Height) //$(".row_box_height").css({"height":Height + "px"}); let h = $(".box_height").height(); console.log(h); $(".row_box_height").css({"height":h/2 + "px"}); </script>