jquery点击获取div高度和宽度
文章描述：
jQuery获取div的宽度和高度值
<div class="container" style="max-width:800px; margin-top:100px;">
<div class="alert alert-primary">
信息提示
</div>
<div class="row">
<div class="col-sm-4 item">
地下城与勇士
</div>
<div class="col-sm-4 item2">
英雄联盟
</div>
<div class="col-sm-4 item3">
绝地求生
</div>
</div>
</div>.row{ margin:140px 0 0 0;}
.item{ max-width:200px; width:200px; height:200px; line-height:200px; text-align: center; color: #fff; font-size: 1.4em; background:#00AAEE; margin-right:20px;}
.item2{ max-width:180px; width:180px; height:180px;line-height:180px; text-align: center; color: #fff; font-size: 1.4em; background:#00AAEE; margin-right:20px;}
.item3{ max-width:160px; width:160px; height:160px;line-height:160px; text-align: center; color: #fff; font-size: 1.4em; background:#00AAEE; margin-right:20px;}
$('.container .col-sm-4').on('click',function(){
var div_w = $(this).outerWidth();
var div_h = $(this).outerHeight();
console.log(div_w);
console.log(div_h);
var msg = '当前div 宽度：'+div_w+'px 高度：'+div_h+'px';
$('.alert').html(msg);
});
发布时间：2022/10/13
发表评论