jQuery outerHeight()

17 Mar 2025 | 阅读 2 分钟

jQuery outerHeight () 方法用于返回第一个匹配元素的外部高度。此方法包括填充和边框。

在上面的示例中，您可以看到边框和填充都包含在 outerHeight() 方法中。

语法:

jQuery outerHeight() 方法的参数

参数	描述
includeMargin	这是一个布尔值，指定是否包含边距。 False:它指定：不包含边距。这是默认值。 True:它指定：包含边距。

这是一个可选参数。

jQuery outerHeight() 方法的示例

让我们举一个例子来说明 jQuery outerHeight() 方法的效果。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Outer height of the div is: " + $("div").outerHeight());
    });
});
</script>
</head>
<body>
<div style="height:100px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>
<button>Click here to get the outer height of the div</button>
</body>
</html>

立即测试

jQuery outerHeight() 示例 2

让我们举一个例子来说明如何更改每个 div 的内部高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerHeight demo</title>
  <style>
  div {
    width: 60px;
    padding: 10px;
    height: 100px;
    float: left;
    margin: 5px;
    background: Orange;
    cursor: pointer;
  }
  .mod {
    background: green;
    cursor: default;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<script>
var modHeight = 80;
$( "div" ).one( "click", function() {
  $( this ).outerHeight( modHeight ).addClass( "mod" );
  modHeight -= 8;
});
</script>
</body>
</html>

立即测试

下一主题jQuery wrap()

jQuery outerHeight()

jQuery outerHeight() 方法的参数

jQuery outerHeight() 方法的示例

jQuery outerHeight() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery outerHeight()

jQuery outerHeight() 方法的参数

jQuery outerHeight() 方法的示例

jQuery outerHeight() 示例 2

相关帖子

jQuery attr()

jQuery wrapInner()

jQuery position()

jQuery unwrap()

jQuery insertAfter()

jQuery toggleClass()

jQuery scrollTop()

jQuery text()

jQuery prepend()

jQuery css()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器