在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。
与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。
在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。
下面我们以元素box的盒模型为例来介绍它们之间的区别。
height()：height
innerHeight()：height + padding
outerHeight()：height + padding + border
outerHeight(true)：height+padding+border+margin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="box" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>
<script>
var $ele = $("#box");
// height() = height(100) = 100
document.writeln( $ele.height() ); // 100
// innerHeight() = height(100) + padding(10*2)= 120
document.writeln( $ele.innerHeight() ); // 120
// outerHeight() = height(100) + padding(10*2) + border(1*2) = 122
document.writeln( $ele.outerHeight() ); // 122
// outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132
document.writeln( $ele.outerHeight(true) ); // 132
</script>
</body>
</html>
效果图：
相关推荐
在Web开发中，对元素尺寸的精确控制是一项常见的需求，而jQuery提供了一系列的方法来获取和设置元素的高度，包括：height(), innerHeight(), 和 outerHeight()。这些方法可以帮助开发者轻松获取元素的高度值，但它们...
在使用jQuery库进行Web开发的过程中，...总结来说，理解jQuery中height()、innerHeight()和outerHeight()三个函数之间的区别，并熟悉它们在不同jQuery版本中的支持情况，对于开发出高效和兼容性良好的Web应用至关重要。
jQuery中的位置函数是用于获取或设置元素在页面或容器中的位置的关键工具，这些函数包括`offset()`, `innerWidth()`, `innerHeight()`, `outerWidth()`, `outerHeight()`, `scrollTop()`, 和 `scrollLeft()`。...
2. **计算高度**：使用`.height()`函数获取元素的高度，`.outerHeight()`则包括边框，`.innerHeight()`则包括内边距。 3. **设置高度**：使用`.height(newHeight)`可以将元素的高度设置为指定值。 4. **事件监听**...
windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; } else if (document.body) { ...
**标题：“JQ最少代码实现无缝滚动”** 在网页设计中，为了提供用户更好的浏览体验，无缝滚动效果常被用于长列表或者图片展示。JQuery（简称JQ）作为一个轻量级、功能丰富的JavaScript库，提供了简单易用的API来...
jquery中有三个获取element高度的方法，分别是:height(),innerHeight(),outerHeght(bool);同样对应的有三个获取element宽度的方法:width(),innerHeight(),outerHeight(bool),这三个方法分别对应怎样的元素属性，如下...
在jQuery库中，虽然没有直接提供获取页面高度和宽度的内置方法，但可以通过编写自定义函数来实现这一功能。这里我们将深入探讨如何使用jQuery获取页面高度和宽度，以及相关的一些浏览器兼容性问题。 首先，给定的...
$(选择器).height() | innerHeight() | outerHeight() 其中宽和高分别有三个方法： width()和 height()是指元素里面内容的宽高； innerWidth()和 innerHeight()是指元素里面内容的宽高加上内边距的宽高； outerWidth...
- 客户端分辨率：使用`window.innerWidth`和`window.innerHeight`获取。 二、功能类 1. 时间与相关控件： - 日历、时间控件、万年历、动态显示时钟效果等，通常通过创建自定义HTML元素和JavaScript函数实现。 ...
以下是一些相关的JavaScript函数，用于获取这些信息： 1. **getHeight() 函数**：这个函数的主要目的是计算当前页面可视区域的高度。它首先尝试使用 `window.innerHeight` 和 `window.scrollMaxY` 来获取高度，这是...
'top': windowHeight / 2 - floatingWindow.innerHeight() / 2, 'left': windowWidth / 2 - floatingWindow.innerWidth() / 2 }); } // 监听窗口大小改变，重新居中浮窗 $(window).resize(function() { ...
本篇文章将详细探讨`three.js`中的核心函数，帮助你深入理解这个强大的库。 一、初始化与场景设置 在`three.js`中，创建3D场景的第一步是创建一个`Scene`对象，它是所有3D物体的容器。然后，我们需要一个`Camera`...
windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // IE6 Strict模式 windowHeight = document.documentElement.clientHeight; } else { ...
JavaScript 中的 window 对象的各个属性和方法，包括 status、statusbar、defaultstatus、location、locationbar、self、name、closed、frames、frames.length、length、document、history、innerHeight、innerWidth...
54. `window.innerWidth` 和 `window.innerHeight` 分别获取窗口的宽度和高度。 55. `window.screen.width` 和 `window.screen.height` 获取屏幕分辨率。 以上就是从给定文件中提取的部分JavaScript基础知识和函数...