Jquery获取元素宽高

最新推荐文章于 2024-03-29 10:03:44 发布
最新推荐文章于 2024-03-29 10:03:44 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/had_meno/article/details/52983799
版权

首先，利用Jquery获取元素的高度。

height()方法用于获得元素高度；

innerHeight()方法用于获得包括内边距（padding）的元素高度；

outerHeight()方法用于获得包括内边距(padding)和边框(border)的元素高度；

outerWidth(true)方法用于获得包括内边距(padding)和边框(border)和外边距(margin)的元素高度。

同理，width()，innnerWidth()，outerWidth()，outerWidth(true)同样能获得不同的元素宽度。

用一个例子更直观得看4种获取不同高度的方式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<style>
	body { margin:0; }
	.div1 { width:200px; height:150px; margin-bottom:20px; padding:10px; background:yellow; }
	.div2 { width:300px; height:200px; margin-bottom:10px; background:red; }
	.div3 { width:160px; height:160px; margin-bottom:5px; border:1px solid red; background:blue; }
</style>
<script>
	$(function(){
		var divHeight1 = $('.div1').height();
		var divHeight2 = $('.div2').height();
		var divHeight3 = $('.div3').height();
		$('.div1').append('div1的高度是' + divHeight1 + '<br/>');
		$('.div2').append('div2的高度是' + divHeight2 + '<br/>');
		$('.div3').append('div3的高度是' + divHeight3 + '<br/>');
		
		var divInnerHeight1 = $('.div1').innerHeight();
		var divInnerHeight2 = $('.div2').innerHeight();
		var divInnerHeight3 = $('.div3').innerHeight();
		$('.div1').append('div1的InnerHeight是' + divInnerHeight1 + '<br/>');
		$('.div2').append('div2的InnerHeight是' + divInnerHeight2 + '<br/>');
		$('.div3').append('div3的InnerHeight是' + divInnerHeight3 + '<br/>');
		
		var divOuterHeight1 = $('.div1').outerHeight();
		var divOuterHeight2 = $('.div2').outerHeight();
		var divOuterHeight3 = $('.div3').outerHeight();
		$('.div1').append('div1的OuterHeight是' + divOuterHeight1 + '<br/>');
		$('.div2').append('div2的OuterHeight是' + divOuterHeight2 + '<br/>');
		$('.div3').append('div3的OuterHeight是' + divOuterHeight3 + '<br/>');
		
		var divOuterHeightTrue1 = $('.div1').outerHeight(true);
		var divOuterHeightTrue2 = $('.div2').outerHeight(true);
		var divOuterHeightTrue3 = $('.div3').outerHeight(true);
		$('.div1').append('div1的OuterHeight是' + divOuterHeightTrue1);
		$('.div2').append('div2的OuterHeight是' + divOuterHeightTrue2);
		$('.div3').append('div3的OuterHeight是' + divOuterHeightTrue3);

	});
</script>

</head>
<body>
	<div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

页面如下：




had_meno
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 获取和设置元素的宽高
ivenqin的博客
08-10 4882
本节我们学习如何通过 jQuery 中提供的方法来获取或者设置元素的宽度和高度。 jQuery 中用于获取设置宽高的方法有如下所示： 方法 描述 width() 设置或返回元素的宽度 height() 设置或返回元素的高度 innerWidth() 返回元素的宽度，包括内边距 innerHeight() 返回元素的高度，包括内边距 outerWidth() 返回元素的宽度，包括内边距和边框 outerHeight() 返回元素的高度，包括内边距和边框 width()和
JavaScript与JQUERY获取元素的宽、高和位置
10-20
2. **jQuery获取元素信息** - `offset()`: jQuery的`offset()`方法返回一个包含`top`和`left`属性的对象，表示元素相对于文档的坐标。 - `position()`: 提供了元素相对于最近的已定位父元素的位置，如果没有定位的...
jquery获取html宽度和高度,jQuery获取元素高度（内高/外高）、宽度（内宽/外宽）...
weixin_42144201的博客
07-07 3571
在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界(padding)的元素宽度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进..jQuery中的.height()、.innerHeight()和.outerHei...
jquery 得到元素的宽度
dwb0328的专栏
03-28 315
方法来获取元素的宽度，该方法返回元素的宽度值，不包括边框、内边距或外边距。如果您想要获取包括内边距的宽度，可以使用。是需要获取宽度的元素的ID。您需要确保在调用这些方法时，元素已经被加载到DOM中，这通常是通过将代码放在。方法，如果需要包括外边距，边框和滚动条，可以使用。如果还需要计算边框，可以使用。jquery 得到元素的宽度。在jQuery中，您可以使用。
JQuery 获取相同class长度
痞子杨
11-16 2915
var goodslength = $(“.sprite-check-off”).length;
JS获取DOM的高度包括Padding margin border
xtaydwxf1988的专栏
04-21 1万+
var dom=document.getElementById('center'); var marginTop=getStyle(dom,'marginTop'); alert(parseInt(marginTop)); function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[a
jQuery如何获取元素宽高？
最新发布
qq_53895518的博客
03-29 682
在jQuery中，获取元素的宽和高有多种方法，取决于你是否需要包括边框、内边距或其他额外空间。同时，请确保在DOM加载完成后执行这些操作，避免在元素尚未渲染完成时获取不到正确的尺寸。在未指定参数时获取的是内容区域的尺寸，若要获取考虑窗口滚动条影响的完整尺寸，可以使用。
jQuery获取元素父节点的方法
10-22
在标题和描述中提到的"jQuery获取元素父节点的方法"，主要包括`parent()`、`parents()`和`closest()`这三个方法。下面将详细介绍这三个方法以及它们的区别。 1. `parent([expr])`： `parent()`方法用于获取匹配...
原生js获取宽高与jquery获取宽高的方法关系对比
10-26
在JavaScript和jQuery中，获取元素的宽高是常见的操作，特别是在布局和动态调整元素尺寸时。这篇文章主要讨论原生JavaScript和jQuery中获取宽度的方法，并进行对比分析。 在原生JavaScript中，有两个主要的方法用于...
jQuery获取file控件中图片的宽高与大小
12-08
本文将详细介绍如何使用jQuery和JavaScript来获取`file`控件中图片的宽高与大小。 首先，我们要理解为什么不能直接通过CSS样式属性如`.width()`和`.height()`来获取图片的尺寸。这是因为这些方法是用于获取已经在...
JQuery 获取元素宽度和高度
qq_24917475的博客
06-20 1万+
获取浏览器窗口的高度和宽度：$(document).width()~ $(document).height() width()：返回元素的宽度 height()：返回元素的高度 innerWidth()：返回元素的宽度（含内边距 padding） innerHeight()：返回元素的高度（含内边距 padding） outerWidth()：返回元素的宽度（含内边距 padding + 边...
jquery获取元素宽高
sayyy的专栏
05-29 1079
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head> <meta charset="utf-8"> <style> li { margin: 10px; padding: 5px; border: 2px solid #666; width: 800px; height: 100px; display: block; } li:first-c
jQuery获取元素的宽度高度
zjbkzj的博客
01-04 769
在此只写宽度的获取方法了，高度的方法是一样的相信聪明的你们可以懂的。 获取宽度 #div{ width: 100px; height: 100px; padding: 10px; border: 10px solid #000; margin: 10px; box-sizing: border-box;} $(function(){
jquery获取元素的所有宽高（包括内边距和外边距）
dengguangming2014的博客
05-29 966
width() - 返回元素的宽度。height() - 返回元素的高度。innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。 outerWidth() 方法返回元素的宽度（包括内边距和边框）。 outerHeight...
javascript中获取dom元素的高度和宽度
frank_fong的博客
11-27 1万+
javascript中获取dom元素高度和宽度的方法如下： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正
JS中DOM元素获取的宽和高的方法小结
热门推荐
不想写代码的一天
05-28 2万+
网页可见区域宽： document.body.clientWidth （可变） 网页可见区域高： document.body.clientHeight （可变） 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
关于jquery获取元素高度、height、scrollTop等问题，更新。。。
十年树木的博客
04-14 1万+
1、是看这边资料的：http://www.365mini.com/page/jquery-scrolltop.htm 当一个区域设置了over-flow-y：scroll，选择的li不在可视区，怎么样让页面初始化时展示这个li呢？ 效果图： 怎么做呢？我写的js代码： //如果当前选择的法院不再可视区，滚动滚动条使其可见 function show_scrollTop(){
jQuery获取元素各种宽高及页面宽高总结
sinat_41274057的博客
11-19 236
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高，不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth(),...
jQuery获取与设置div的宽高
AinUser的博客
01-07 4778
有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法 获取宽高 1. 尺寸函数：height() 获取高度，width() 获取宽度 2. css获取div宽高：css("height")获取高度，css("width")获取宽度 区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串 [javas
js获取页面图片宽高大小
07-27
要通过JavaScript获取页面图片的宽高大小，可以使用不同的方法。一种常见的方法是使用jQuery的`.width()`和`.height()`方法来获取图片的宽度和高度。这些方法可以直接应用于图片元素，例如`$('img').width()`和`$('img').height()`。\[2\] 另一种方法是使用JavaScript的`.offsetWidth`和`.offsetHeight`属性来获取图片的宽度和高度。这些属性返回的是元素在页面中的实际宽度和高度，包括边框和内边距。例如，可以通过`document.querySelector('img').offsetWidth`和`document.querySelector('img').offsetHeight`来获取图片的宽度和高度。\[2\] 还有一种方法是直接通过图片元素的属性值`.width`和`.height`来获取宽度和高度。如果图片元素没有设置这些属性，它们将返回0。例如，可以通过`document.querySelector('img').width`和`document.querySelector('img').height`来获取图片的宽度和高度。\[3\] 需要注意的是，使用这些方法获取图片的宽高大小时，确保在图片加载完成后再进行获取，以避免获取到不准确的值。可以使用`window.onload`事件或者`img.onload`事件来确保图片已经加载完成。\[2\] #### 引用[.reference_title] - *1* *2* [Android 获取图片真实宽高](https://blog.csdn.net/weixin_35690047/article/details/112889680)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [JS获取img图片的原始尺寸高度和宽度](https://blog.csdn.net/mouday/article/details/124845668)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值