`
魏祖清
  • 浏览: 180270 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

杂谈jQuery中的 height innerHeight outerHeight

    博客分类:
  • css
阅读更多
html代码:
<div style="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果:
在ie中的结果:17px,37px,41px,61px
在ff中的结果:20px,40px,44px,64px

html代码:
<div style="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果:
在ie中的结果:17px,37px,41px,61px
在ff中的结果:41px,61px,65px,85px

html代码:
<div style="width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果:
在ie中的结果:18px,38px,42px,62px
在ff中的结果:42px,62px,66px,86px

html代码:
<div style="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果:
在ie中的结果:36px,56px,60px,80px
在ff中的结果:60px,80px,84px,104px

结论:在ie中height包含border和padding并且height最小值为17px ,同理可得width,不过它最小值为15px
分享到:
评论

相关推荐

    jQuery中的height innerHeight outerHeight区别示例介绍

    在Web开发中,对元素尺寸的精确控制是一项常见的需求,而jQuery提供了一系列的方法来获取和设置元素的高度,包括:height(), innerHeight(), 和 outerHeight()。这些方法可以帮助开发者轻松获取元素的高度值,但它们...

    JQ height()、innerHeight()、outerHeight()函数的区别

    今天我们要讨论的是jQuery中的三个高度获取函数:`height()`、`innerHeight()`和`outerHeight()`。这三个函数都是用来获取或设置元素的高度,但它们之间存在着细微的差别。 首先,`height()`函数是最基础的,它用于...

    jQuery height()、innerHeight()、outerHeight()函数的区别详解

    在使用jQuery库进行Web开发的过程中,开发者经常需要获取或设置元素的高度,此时有三个函数可以使用:height()、innerHeight()和outerHeight()。尽管它们都与高度相关,但它们所获取和设置的范围却各不相同。本文将...

    浅谈jQuery中height与width

    jquery中有三个获取element高度的方法,分别是:height(),innerHeight(),outerHeght(bool);同样对应的有三个获取element宽度的方法:width(),innerHeight(),outerHeight(bool),这三个方法分别对应怎样的元素属性,如下...

    jQuery自动适应高度布局代码.zip

    2. **计算高度**:使用`.height()`函数获取元素的高度,`.outerHeight()`则包括边框,`.innerHeight()`则包括内边距。 3. **设置高度**:使用`.height(newHeight)`可以将元素的高度设置为指定值。 4. **事件监听**...

    jQuery容器的自适应.pptx

    $(选择器).height() | innerHeight() | outerHeight() 其中宽和高分别有三个方法: width()和 height()是指元素里面内容的宽高; innerWidth()和 innerHeight()是指元素里面内容的宽高加上内边距的宽高; outerWidth...

    jQuery中innerHeight()方法用法实例

    在jQuery库中,`innerHeight()`方法是一个非常实用的函数,用于获取匹配元素集合中第一个元素的内部高度,包括内补白(padding),但不包括边框(border)。这个方法适用于可见元素和不可见元素,使得开发者能方便地...

    jquery中有哪些api jQuery主要API

    `height()`、`width()`、`innerHeight()`、`innerWidth()`、`outerHeight()`和`outerWidth()`方法则用于获取元素的高度和宽度信息。 jQuery选择器是用于选取DOM元素的一种强大工具。除了常见的类选择器、ID选择器、...

    jQuery 1.4.1 中文参考

    - `height()`、`width()`、`innerHeight()`、`innerWidth()`、`outerHeight()`、`outerWidth()`:元素的尺寸计算。 **事件处理** - `ready(fn)`:页面加载完成时执行函数。 - `bind()`、`one()`、`trigger()`、`...

    jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

    jQuery中的位置函数是用于获取或设置元素在页面或容器中的位置的关键工具,这些函数包括`offset()`, `innerWidth()`, `innerHeight()`, `outerWidth()`, `outerHeight()`, `scrollTop()`, 和 `scrollLeft()`。...

    JQuery新版中文手册

    outerHeight([soptions]) outerWidth([options]) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :...

    jQuery帮助文档

    outerHeight(options) outerWidth(options) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :...

    jQuery1.3.2中文手册.rar

    3. **尺寸操作**: `height()`、`width()`获取元素高度和宽度,`outerHeight()`、`outerWidth()`包含边距,`innerHeight()`、`innerWidth()`不包括边距。 **三、jQuery AJAX** 1. **$.ajax()**: 核心的异步数据请求...

    JQuery中文手册

    3. **尺寸操作**: `width()`, `height()`用于获取元素尺寸,`outerWidth()`, `outerHeight()`包含边距,`innerWidth()`, `innerHeight()`则不包含边距。 **三、jQuery AJAX** 1. **$.ajax()**: 这是jQuery的核心...

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    3. 属性值的计算:`.width()`和`.height()`返回元素的宽度和高度,`.innerWidth()`和`.innerHeight()`包括内边距,`.outerWidth()`和`.outerHeight()`包含边框,`.outerWidth(true)`和`.outerHeight(true)`还包含...

Global site tag (gtag.js) - Google Analytics