Jquery获取元素宽高

最新推荐文章于 2024-03-28 10:15:52 发布
最新推荐文章于 2024-03-28 10:15:52 发布
阅读量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 4874
本节我们学习如何通过 jQuery 中提供的方法来获取或者设置元素的宽度和高度。 jQuery 中用于获取设置宽高的方法有如下所示： 方法 描述 width() 设置或返回元素的宽度 height() 设置或返回元素的高度 innerWidth() 返回元素的宽度，包括内边距 innerHeight() 返回元素的高度，包括内边距 outerWidth() 返回元素的宽度，包括内边距和边框 outerHeight() 返回元素的高度，包括内边距和边框 width()和
使用jQuery操作DOM
yananye的博客
02-25 1717
DOM操作 在jQuery中，DOM操作是一个非常重要的组成部分。jQuery中提供了一系列操作DOM强有力的方法，它们不仅简化了传统javascript操作DOM时繁冗的代码，更加解决了令开发者故不堪言的跨平台浏览器兼容性。 jQuery中的DOM操作 jQuery中的DOM操作主要可分为样式操作，文本和value属性值操作，节点操作，节点操作中又包含属性操作，节点遍历和CSS-DOM操作。其中最核心的部分是节点操作和节点遍历。 样式操作 jQuery不仅对CSS样式表有着良好的支持，而且对浏览器也有
获取元素高度与宽度
weixin_45932733的博客
09-09 5925
1.在js中获取元素的高度与宽度,用到这两个api分别为offsetWidth与offsetWidth const width = document.body.offsetWidth const height = document.body.offsetheight 2.同理获取id或者class的高度与宽度同一类似，id与class就是你所取的名字 const width = document.getElementById("id").offsetWidth const height = documen
vue获取某个元素高度
Smile_ping的博客
04-07 3657
vue获取某个元素高度 <template> <div class="wrap"> <!-- 定义ref属性 --> <div class="header" ref="header"> <!-- 内容 --> </div> <!-- 根据需求设置 --> <div class="main" :style
jQuery获取元素尺寸的方法
corn78的博客
05-24 2311
一、.width() 为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。 内容宽度 二、.height() 获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。 内容高度 三、.innerWidth() 为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。 内容宽度 + 左右padding 四、.innerHeight() 为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括bord
【jQuery】获取元素高宽的三个方法和注意点
星光不问赶路人，时光不负有心人。
02-28 1373
目录 方法一：使用 width() 和 height() 方法 方法二：用 css() 方法 方法三：用 innerWidth() 和 outWidth() 方法，以及 innerHeight() 和 outHeight() 方法 计算元素高宽的方法总结： jQuery中获取元素高宽时还是有些地方需要注意的，省时间的话直接跳到底部总结。 这是页面结构，就一个ID 为box 的div ...
jquery获取元素内容
qq_36545656的博客
01-17 815
jquery 在获取元素内容的时候，.text()和.html（）都可以获取到元素的内容，但是这两者到底有什么区别呢？ 下面让我们来看一个例子： 今天天气不错哈！ 点我 js部分 $('#btn').click(function(){ alert('text:'+$('#text').text()); alert('text:'+$('#text').html());/两种写法都可以
JavaScript与JQUERY获取元素的宽、高和位置
10-20
2. **jQuery获取元素信息** - `offset()`: jQuery的`offset()`方法返回一个包含`top`和`left`属性的对象，表示元素相对于文档的坐标。 - `position()`: 提供了元素相对于最近的已定位父元素的位置，如果没有定位的...
jQuery获取元素父节点的方法
10-22
在标题和描述中提到的"jQuery获取元素父节点的方法"，主要包括`parent()`、`parents()`和`closest()`这三个方法。下面将详细介绍这三个方法以及它们的区别。 1. `parent([expr])`： `parent()`方法用于获取匹配...
原生js获取宽高与jquery获取宽高的方法关系对比
10-26
在JavaScript和jQuery中，获取元素的宽高是常见的操作，特别是在布局和动态调整元素尺寸时。这篇文章主要讨论原生JavaScript和jQuery中获取宽度的方法，并进行对比分析。 在原生JavaScript中，有两个主要的方法用于...
无法获取隐藏元素宽度和高度的解决方案
08-31
然后，我们可以根据需要获取元素的宽高信息，例如获取元素的宽度、高度、外边距等信息。为了获取这些信息，我们需要将元素的display属性设置为block，然后计算元素的尺寸信息。最后，我们可以将元素的display属性...
jquery-获取元素尺寸
weixin_52512511的博客
06-27 583
console.log($('div').outerWidth()) //260 内容区域+padding+border 200+10+10+20+20。console.log($('div').innerWidth()) //220 内容区域+padding 200+10+10=220。console.log($('div').width()) //200 内容区域200。4.获取元素内容+padding+border+margin区域。2.获取元素内容+padding区域的尺寸。
jquery获取元素各种宽高及页面宽高总结
weixin_34166847的博客
07-03 627
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高，不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth()...
jquery获取html宽度和高度,jQuery获取元素高度（内高/外高）、宽度（内宽/外宽）...
weixin_42144201的博客
07-07 3568
在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界(padding)的元素宽度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进..jQuery中的.height()、.innerHeight()和.outerHei...
jQuery之宽高
06-17 978
这个宽高不包括paddingbordermargin。
通过id class ref 获取元素的高度和宽度
qq_38946996的博客
06-27 8221
dom 结构 <div id="id1" class="class1" ref="ref1" style="width: 100px; height: 100px;"></div> 通过 id 获取高度宽度 let widthid1 = document.getElementById("id1").offsetWidth let heightid = document.getElementById("id1").offsetheight 通过class 获取高度宽度
jquery 得到元素的宽度
最新发布
dwb0328的专栏
03-28 264
方法来获取元素的宽度，该方法返回元素的宽度值，不包括边框、内边距或外边距。如果您想要获取包括内边距的宽度，可以使用。是需要获取宽度的元素的ID。您需要确保在调用这些方法时，元素已经被加载到DOM中，这通常是通过将代码放在。方法，如果需要包括外边距，边框和滚动条，可以使用。如果还需要计算边框，可以使用。jquery 得到元素的宽度。在jQuery中，您可以使用。
JQuery中获取宽高度方法
xiaozdi的博客
02-23 570
中获取元素节点的定位左边距和上边距。
js获取页面图片宽高大小
07-27
要通过JavaScript获取页面图片的宽高大小，可以使用不同的方法。一种常见的方法是使用jQuery的`.width()`和`.height()`方法来获取图片的宽度和高度。这些方法可以直接应用于图片元素，例如`$('img').width()`和`$('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值