jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: IntegerInteger .height( )

描述: 获取匹配元素集中第一个元素当前计算的高度。
  • version added: 1.0
  • .height( )

.css('height').height()的不同点是后面一个返回 像素单位的值(例如, 400) 而前一个返回完整的值和单位(例如,400px). .height()方法常用于需要数学计算的地方。

这个方法也可以用于取得windw和document的高度。

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

注意.height()方法总是返回内容高度,而不管CSS的box-sizing属性。

Examples:

例子:

显示高度。注意取得iframe的高度值可能会比期望的小。黄色高亮显示的是iframe的body。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }</style>
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>

  <div>&nbsp;</div>
  <p>
    Sample paragraph to test height
  </p>
  <script>function showHeight(ele, h) {
      $("div").text("The height for the " + ele + 
                    " is " + h + "px.");
    }
    $("#getp").click(function () { 
      showHeight("paragraph", $("p").height()); 
    });
    $("#getd").click(function () { 
      showHeight("document", $(document).height()); 
    });
    $("#getw").click(function () { 
      showHeight("window", $(window).height()); 
    });</script>
</body>
</html>

Demo:

Returns: jQueryjQuery .height( Function function(index, height) )

描述: 为每一个匹配的元素设置CSS高度。
  • version added: 1.0
  • .height( String | Number value )
  • value 一个整数,以像素为单位的整数,或是一个整数加度量单位(一个字符串)。
  • version added: 1.4.1
  • .height( Function function(index, height) )
  • function(index, height) 一个函数返回高度。接受元素在集合中的索引位置和其高度作为参数。 在函数中,this指代的是元素集中的当前元素。

当调用.height(value)时,value可以是一个字符串(数字和单位)也可以是一个数字。 如果仅仅提供一个数字作为value,jQuery默认采用像素作为单位。 如果提供一个字符串,必须是可用的CSS度量方式(如,100px, 50%, 或 auto)。注意,在最新的浏览器中,CSS高度属性不包括padding, border, 或 margin。

如果没有指明明确的单位(如, 'em' 或 '%'),"px"是默认单位值。

注意 .height(value)方法设置盒元素高度是根据 CSS box-sizing属性的。 改变这个属性为border-box,这个方法将改变盒的outerHeight而不是内容高度。

Examples:

例子:

点击每一个div时,设置其高度为30px并改变颜色。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }</style>
</head>
<body>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <script>$("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
    });</script>
</body>
</html>

Demo: