- 浏览: 180388 次
- 性别:
- 来自: 福建
最新评论
-
卡殿Love:
你好! 谢谢你的文章让我知道其中的原因,目前正在做手机端上的项 ...
web手机开发(iPhone和Andriod)关于position:fixed 属性的讨论
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
<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
发表评论
-
CSS强制性换行
2013-05-22 13:52 809一般情况下,元素拥有 ... -
最小高度的定义
2011-03-18 10:33 1000height:auto !important;IE6不可以识别 ... -
flash wmode参数详解
2010-10-29 10:50 859在做web开发中可能会遇到flash遮挡页面中元素的情况,无论 ... -
CSS 过滤器 兼容ie,火狐和谷歌
2010-10-28 10:58 3640这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释, ... -
合并图片工具
2010-06-05 08:27 937不错的合成图片的工具,还提供css样式 -
关于line-height设置
2010-03-12 14:08 1149一个小小属性就有那么多的学问,我们来一起了解一下关于line- ... -
区别IE6,IE7,IE8,FF
2010-02-27 13:53 1076区别IE6,IE7,IE8,FF 【区别符号】:「\9」、「 ... -
在ie6下出现“无法打开该地址,浏览器停止服务”的bug
2010-01-04 13:48 749曾经在开发中遇到两次,原因是某个标签没有闭合。 -
IE6下某些中文注释引发的css样式全乱 | IE6下PNG背景图片透明问题
2009-12-08 15:55 2392IE6下如果line-height超出本身区块的height高 ... -
!important认识
2009-12-08 15:07 1007在设计《网页设计师》 ... -
删除div中默认的高度(在ie中)
2009-11-03 17:20 1445<div style='width:100%;heigh ... -
去除和隐藏点击链接时出现的虚线框
2009-10-23 15:53 1288如何去除点击链接时出现的虚线框 有时候在一个页面用到收放功能 ... -
浮层浮动在select的标签上
2009-10-23 09:35 1122例如 <!-- ------------上传大附件 ... -
浮层的移动
2009-10-23 09:30 771使用 <script type="text/ ... -
1000张网页常用图片
2009-06-08 17:13 2021好东东,1000张网页常用图片 -
1000个网页小图标
2009-06-08 17:12 3702好东东,1000个网页小图标 -
50张Flash小图片
2009-06-08 17:11 1290好东西,50张Flash小图片 -
如何插入flash
2009-06-08 17:00 681<object classid="clsid: ... -
在静态图片特定位置做链接
2009-06-08 16:57 855<img src="file:///C|/Do ... -
如何让一个表单中的文本框中的文字垂直居中?
2009-06-08 16:46 1626如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白 ...
相关推荐
在Web开发中,对元素尺寸的精确控制是一项常见的需求,而jQuery提供了一系列的方法来获取和设置元素的高度,包括:height(), innerHeight(), 和 outerHeight()。这些方法可以帮助开发者轻松获取元素的高度值,但它们...
今天我们要讨论的是jQuery中的三个高度获取函数:`height()`、`innerHeight()`和`outerHeight()`。这三个函数都是用来获取或设置元素的高度,但它们之间存在着细微的差别。 首先,`height()`函数是最基础的,它用于...
在使用jQuery库进行Web开发的过程中,开发者经常需要获取或设置元素的高度,此时有三个函数可以使用:height()、innerHeight()和outerHeight()。尽管它们都与高度相关,但它们所获取和设置的范围却各不相同。本文将...
jquery中有三个获取element高度的方法,分别是:height(),innerHeight(),outerHeght(bool);同样对应的有三个获取element宽度的方法:width(),innerHeight(),outerHeight(bool),这三个方法分别对应怎样的元素属性,如下...
2. **计算高度**:使用`.height()`函数获取元素的高度,`.outerHeight()`则包括边框,`.innerHeight()`则包括内边距。 3. **设置高度**:使用`.height(newHeight)`可以将元素的高度设置为指定值。 4. **事件监听**...
$(选择器).height() | innerHeight() | outerHeight() 其中宽和高分别有三个方法: width()和 height()是指元素里面内容的宽高; innerWidth()和 innerHeight()是指元素里面内容的宽高加上内边距的宽高; outerWidth...
在jQuery库中,`innerHeight()`方法是一个非常实用的函数,用于获取匹配元素集合中第一个元素的内部高度,包括内补白(padding),但不包括边框(border)。这个方法适用于可见元素和不可见元素,使得开发者能方便地...
`height()`、`width()`、`innerHeight()`、`innerWidth()`、`outerHeight()`和`outerWidth()`方法则用于获取元素的高度和宽度信息。 jQuery选择器是用于选取DOM元素的一种强大工具。除了常见的类选择器、ID选择器、...
- `height()`、`width()`、`innerHeight()`、`innerWidth()`、`outerHeight()`、`outerWidth()`:元素的尺寸计算。 **事件处理** - `ready(fn)`:页面加载完成时执行函数。 - `bind()`、`one()`、`trigger()`、`...
jQuery中的位置函数是用于获取或设置元素在页面或容器中的位置的关键工具,这些函数包括`offset()`, `innerWidth()`, `innerHeight()`, `outerWidth()`, `outerHeight()`, `scrollTop()`, 和 `scrollLeft()`。...
outerHeight([soptions]) outerWidth([options]) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :...
outerHeight(options) outerWidth(options) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :...
3. **尺寸操作**: `height()`、`width()`获取元素高度和宽度,`outerHeight()`、`outerWidth()`包含边距,`innerHeight()`、`innerWidth()`不包括边距。 **三、jQuery AJAX** 1. **$.ajax()**: 核心的异步数据请求...
3. **尺寸操作**: `width()`, `height()`用于获取元素尺寸,`outerWidth()`, `outerHeight()`包含边距,`innerWidth()`, `innerHeight()`则不包含边距。 **三、jQuery AJAX** 1. **$.ajax()**: 这是jQuery的核心...
3. 属性值的计算:`.width()`和`.height()`返回元素的宽度和高度,`.innerWidth()`和`.innerHeight()`包括内边距,`.outerWidth()`和`.outerHeight()`包含边框,`.outerWidth(true)`和`.outerHeight(true)`还包含...