`
魏祖清
  • 浏览: 176982 次
  • 性别: 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区别示例介绍

    主要介绍了jQuery中的height innerHeight outerHeight的区别,需要的朋友可以参考下

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

    主要介绍了jQuery height()、innerHeight()、outerHeight()函数的区别详解,需要的朋友可以参考下

    浅谈jQuery中height与width

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

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

    NULL 博文链接:https://onestopweb.iteye.com/blog/2359446

    jQuery容器的自适应.pptx

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

    jQuery 1.4.1 中文参考

    7.3.7 outerHeight(options) 115 7.3.8 outerWidth(options) 116 8. 事件 116 8.1 页面载入 116 8.1.1 ready(fn) 116 8.2 事件处理 117 8.2.1 bind(type, [data], fn) 117 8.2.2 one(type, [data], fn) 122 8.2.3 ...

    jQuery中innerHeight()方法用法实例

    主要介绍了jQuery中innerHeight()方法用法,实例分析了innerHeight()方法的功能、定义及获取第一个匹配元素内部区域高度的使用技巧,需要的朋友可以参考下

    JQuery新版中文手册

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

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

    代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C... &lt;head&gt; &lt;title&gt;jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用&lt;/title&gt; &lt;s

    jQuery帮助文档

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

    jQuery 1.5 API 中文版

    $.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...

    JQuery 1.3 中文参考手册

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

    Jquery 1.3 简体中文手册

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

    jquery1.11.0手册

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

    JavaScript中的各种宽高属性的实现

    在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等……这么多,傻傻分...

Global site tag (gtag.js) - Google Analytics