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>