jQuery获取元素的宽度高度

最新推荐文章于 2024-03-29 10:03:44 发布

簸箕0606

最新推荐文章于 2024-03-29 10:03:44 发布

阅读量777

点赞数

本文链接：https://blog.csdn.net/zjbkzj/article/details/78971881

版权

在此只写宽度的获取方法了，高度的方法是一样的相信聪明的你们可以懂的。

<!DOCTYPE html>
<html>
<head>
<title>获取宽度</title>
<style type="text/css">
#div{
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #000;
margin: 10px;
box-sizing: border-box;}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){

//1.标准盒模型时box-sizing: content-box;

// var _wd = $('#div').width();
// const _owd = $('#div').outerWidth();
// const _owdt = $('#div').outerWidth(true);
// console.log(_wd+'-->'+_owd+'-->'+_owdt);//100-->140-->160

//2.标准盒模型时box-sizing: border-box;

var _wd = $('#div').width();
const _owd = $('#div').outerWidth();
const _owdt = $('#div').outerWidth(true);
console.log(_wd+'-->'+_owd+'-->'+_owdt);//60-->100-->120
})
</script>
</body>
</html>