js makes css height equal to width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单一DIV情况</title>
</head>
<body>
<div id="id_get_div_width" style="padding: 0 10px;">
    <img src="#" id="id_img_size">
</div>
<script>
    var aDiv=document.getElementById('id_img_size');
    var bDiv=document.getElementById('id_get_div_width');
    var aDiv_width=bDiv.offsetWidth-(parseInt($('#id_get_div_width').css('padding-left'))*2);
    aDiv.style.width=aDiv_width+'px';//id_img_size width=id_get_div_width (minus left and right padding)
    aDiv.style.height=bDiv.offsetWidth+'px'; //id_img_size height=id_get_div_width width
    aDiv.style.width=bDiv.offsetWidth+'px';     //id_img_size的宽=id_get_div_width的宽
</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环多条DIV情况</title>
</head>
<body>
<div class="get_div_width">
    <img src="#" class="img_size">
</div>
<div class="get_div_width">
    <img src="#" class="img_size">
</div>
<div class="get_div_width">
    <img src="#" class="img_size">
</div>
<script>
    var aDiv=document.getElementsByClassName('img_size');
    var bDiv=document.getElementsByClassName('get_div_width');
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].style.height=bDiv[i].offsetWidth+'px';
        aDiv[i].style.width=bDiv[i].offsetWidth+'px';
    }
</script>
</body>
</html>

Guess you like

Origin blog.csdn.net/weixin_41653910/article/details/84859855