jquery获取div的宽度与高度的方法教程
墨初 前端设计 2069阅读
一般来说div元素的宽度与高度是指的内容宽度与高度,但在CSS样式排版时要考虑到DIV元素的 padding、border 与 margin 属性定义的的宽度与高度。而在jq代码获取div元素的高度与宽度时同样也要考虑这么样式属性定义的高度与宽度!
jq获取DIV元素高度与宽度的方法
1、jq获取元素内容的高度与宽度的方法
jq元素内容的宽与高,直接使用 width() 与 heigth() 方法即可!
$('div').width(); $('div').height();
2、jq获取带有 padding 属性的高度与宽度的方法
jq 中的 innerWidth() 与 innerHeight() 方法可以获取带有 padding 属性的宽与高
$('div').innerWidth(); $('div').innerHeight();
3、jq获取带有 padding + border 属性的高度与宽度的示例
jq outerWidth() 与 outerHeight() 方法获取 带有 padding + borde 属性的宽与高的值
$('div').outerWidth(); $('div').outerHeight();
4、jq获取带有 padding + border + margin 属性的高度与宽度方法
jq 给 outerWidth() 与 outerHeight() 方法加入一个参数 true,可以获取到带有 margin 属性的宽度值与高度值!
$('div').outerWidth(true); $('div').outerHeight(true);
jq获取div元素高与宽的完整示例代码
注:代码复制到本地可运行查看!
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script> <title>示例代码-飞鸟慕鱼博客</title> <style> div{ display:inline-block; width:100px; height:60px; padding:20px 10px; border:2px solid red; margin: 20px 30px; } </style> </head> <body> <div class="div1">飞鸟慕鱼博客</div> <script> //内容的高度与宽度 console.log($('div').width()); //100 console.log($('div').height()); //60 //带有 padding 属性的高度与宽度 console.log($('div').innerWidth()); //100 + 10 + 10 = 120 console.log($('div').innerHeight()); //60 + 20 + 20 = 100 //带有 padding + border 属性的高度与宽度 console.log($('div').outerWidth()); //100 + 10 + 10 + 2 + 2 = 124 console.log($('div').outerHeight()); //60 + 20 + 20 + 2 + 2 = 104 //带有 padding + border + margin 属性的高度与宽度 console.log($('div').outerWidth(true)); //100 + 10 + 10 + 2 + 2 + 30 + 30 = 184 console.log($('div').outerHeight(true)); //60 + 20 + 20 + 2 + 2 + 20 + 20 = 144 </script> </body> </html>