height

1. .height()

  获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值(带一个参数)。

2.box-sizing

  css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。

  box-sizing: content-box;   -------定义width和height时,不包括border和padding。

  box-sizing: border-box;    -------定义width和height时,border和padding则是被包含在宽高之内的。

(不定义box-sizing时:

  IE:在 IE6以前的版本中,width和height是包括border和padding的,IE6之后则不包括。

  其他浏览器:width和height不包括border和padding。)

  

3. .css()与 .height()

   1).css(‘height‘).height()之间的区别是:

    .height()返回一个没有单位的数值(例如,400),

       .css(‘height‘)是返回带有完整单位的字符串(例如,400px)。

   2) .height(‘value‘)与.css(‘height‘,value)之间的区别:

      当box-sizing: border-box; 时, .height(‘value‘)设置的是纯的height值,.css(‘height‘,value)设置的是包括padding和border的值;

      没有设置box-sizing: border-box; 时,两者效果一样。

4. .innerHeight()

  为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。.innerHeight()没有参数。

  

5. .outerHeight()

  获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。

  返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。

  在.outerHeight()计算中总是包含padding和border ;如果includeMargin参数是true,那么margin (top 和 bottom)也会被包含。

6. jQuery(window).height()与jQuery(document).height()

  jQuery(window).height()代表了当前可见区域的大小;jQuery(document).height()则代表了整个文档的高度。  

  注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的。

$(document.documentElement).height()与$(document).height()没什么区别:

$(document.documentElement) 是指[<html>…</html>];

  $(document)是[#document],即 [<!DOCTYPE html><html>…</html>],包括<html></html>标签的顶部内容,如<!DOCTYPE html>

7. scrollTop()

  $(document).scrollTop() 获取垂直滚动的距离,即当前滚动的地方的窗口顶端到整个页面顶端的距离
  $(document).scrollLeft() 这是获取水平滚动条的距离

  当获取到scrollTop()==0的时候,就是顶端了,

  当获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了(仔细的想确实是这样哦~~)

8. .getBoundingClientRect()

  该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。下面用图说明下:

   

例子:document.getElementById(‘div1‘).getBoundingClientRect();

结果是:lientRect {            height: 110,             width: 460,             left: 221.5,             bottom: 262,             right: 681.5            __proto__: ClientRect          }

  该方法已经不再只是适用IE了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

时间: 2024-10-11 10:34:26

height的相关文章

canvas设置width, height

在style里面设置canvas的宽高时,会发现画出的图像被拉伸了:在canvas元素中直接设置width和height就会恢复正常:如果在canvas元素里的style里设置width和height会发现又不行了!看了chy龙神 的博客发现了其中玄机.. 首先这是由canvas的构造导致的,canvas是一个画板和一张画纸组成的.当画板和画纸尺寸一致时,不会发生拉伸变形的情况:当画板和画纸尺寸不一致时,就会被拉伸变形. 能正确设置画板和画纸宽高一致的方法,这些方法可以同时设置画板和画纸的宽高:

使用 &lt;embed&gt; 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ;  宽度 小于 高度 (竖向的) . 此时. 最好的的办法 是给 <embed> 设置 一个 固定的 宽度 和高度 . 此时flash 会自动缩放. 至于缩放比例: 如果 先 碰到 高度 , 那么 flash的高度就是 embed的 设置的高度,  宽度等比例缩放; 如果 先碰到宽度,   那

input标签不能设置height

首先input是内联标签(inline) inline元素设置width.height属性无效 可以通过设置display:inline-block ,则内联标签可以设置width和height,但是设置了如果还无效,那么 浏览器不同解决办法不同: <style> input[type=button] { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和

height clientHeight scrollHeight offsetHeight的大致区别

这主要是针对火狐浏览器来讲的: height:就是div的高度: clientHeight:一般情况下和height是一样的,如果div有滚动条,那么clientHeight = height - 滚动条的高度: var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientH

H5 canvas的 width、height 与style中宽高的区别

Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器!</canvas> <script type="text/javascript"> var canvas = document.getE

25.按要求编写一个Java应用程序: (1)编写一个矩形类Rect,包含: 两个属性:矩形的宽width;矩形的高height。 两个构造方法: 1.一个带有两个参数的构造方法,用于将width和height属性初化; 2.一个不带参数的构造方法,将矩形初始化为宽和高都为10。 两个方法: 求矩形面积的方法area() 求矩形周长的方法perimeter() (2)通过继承Rect类编写一个具有

package zhongqiuzuoye; public class Rect { public double width; public double height; Rect(double width,double height) //带有两个参数的构造方法,用于将width和height属性初化; { this.width=width; this.height=height; } Rect() //不带参数的构造方法,将矩形初始化为宽和高都为10. { width=10; height=

按要求编写Java应用程序: (1)编写西游记人物类(XiYouJiRenWu) 其中属性有:身高(height),名字(name),武器(weapon) 方法有:显示名字(printName),显示武器(printWeapon) (2)在主类的main方法中创建二个对象:zhuBaJie,sunWuKong。并分别为他 们的两个属性(name,weapon)赋值,最后分别调用printName,

package com.hanqi.test; public class xiyoujirenwu { int height; String name; String weapon; xiyoujirenwu(String na,String wp ) { name=na; weapon=wp; } String printName() { return name; } String printWeapon() { return weapon; } } //主类 package com.hanq

Make div 100% height of browser window/设置div等于浏览器的高度

Viewport-Percentage (or Viewport-Relative) Lengths Viewport-Percentage Lengths: The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are sc

自动计算高度的方法 iOS, height为0, 可以自动计算weith,

height为0, 可以自动计算weith; weith为0, 可以自动计算height, 两者不可以同时为0 NSDictionary *dic = @{NSFontAttributeName: [UIFont systemFontOfSize:17]}; CGRect rect = [joke.content boundingRectWithSize:CGSizeMake(375 - 20, 0) options:(NSStringDrawingUsesFontLeading | NSStr

[扩展]为UIView扩展x,y,width,height,centerX,centerY,Size,Origin等属性

大家应该知道如何设置一个view组件的位置把,是的,如下: view.frame=CGRectMake(x,y,width,height);//设置组件的x,y坐标,设置组件的宽度高度... 如果我单独要设置坐标或者宽度高度,得这样: view.frame.size.width=100; view.frame.size.height=100; 如果你想偷个懒,比如: view.frame.size=(CGSize){200,200};//这个语句会报错,因为无法对size赋值 通过上面的代码,大