<!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的宽=id_get_div_width(减去左右padding)的宽
aDiv.style.height=bDiv.offsetWidth+'px'; //id_img_size的高=id_get_div_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>
扫一扫
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
