格局用法实例

日期:2019-09-07编辑作者:关于计算机

本文实例讲述了jQuery中height()方法用法。分享给大家供大家参考。具体分析如下:

本文实例讲述了jQuery中outerHeight()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以获取或者设置匹配元素的高度值,默认单位是px。

此方法获取第一个匹配元素外部高度。
默认情况下外部高度是高度(height)、内补白(padding)和边框(border)之和。
如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度。
此方法对可见和隐藏元素均有效。
可以与outerWidth()方法结合学习。

语法结构一:

语法结构:

复制代码 代码如下:

复制代码 代码如下:

$(selector).height()

$(selector).outerHeight(options)

不带参数的时候是返回第一个匹配元素的当前高度。 实例代码:

参数列表:

复制代码 代码如下:

参数 描述
options 定义是否把外补白(margin)计算在内:
一.fase,边距不计算在内,默认值。
二.true,边距计算在内。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  alert($("div").height());
})
</script>
</head>
<body>
<div></div>
</body>
</html>

实例代码:

语法结构二:

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>outerHeight()函数-脚本之家</title>
<style type="text/css">
div{
  background-color:green;
  height:100px;
  width:200px;
  padding:10px;
  margin:10px;
  border:5px solid red;
}  
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("div").outerHeight(true))
  })
})
</script>
</head>
<body>
  <div>此处显outerHeight数值</div>
  <button>点击查看div的outerHeight</button>
</body>
</html>

$(selector).height(val)

点击按钮可以显示div元素外部高度。

带参数的时候是设置所有匹配元素的高度,默认单位是px,当然也可以使用其他的单位如em或者百分比等等。
实例代码:

希望本文所述对大家的jQuery程序设计有所帮助。

复制代码 代码如下:

您可能感兴趣的文章:

  • jQuery中的height innerHeight outerHeight区别示例介绍
  • Jquery 的outerHeight方法使用介绍
  • jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
  • jQuery中outerWidth()方法用法实例
  • jQuery获得document和window对象宽度和高度的方法
  • jQuery设置指定网页元素宽度和高度的方法
  • Jquery实现鼠标移动放大图片功能实例
  • jQuery获得包含margin的outerWidth和outerHeight的方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").height("200px")
  })
})
</script>
</head>
<body>
<div></div>
<button>点击查看效果</button>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
  • 关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
  • 使用jquery中height()方法获取各种高度大全
  • jQuery中的height innerHeight outerHeight区别示例介绍
  • jQuery获得包含margin的outerWidth和outerHeight的方法
  • jquery获取文档高度和窗口高度汇总

本文由今晚最快开奖现场直播发布于关于计算机,转载请注明出处:格局用法实例

关键词:

运用javascript实现Iframe自适应中度

方法一: 那边介绍八个最棒轻巧的办法,不用写什么推断浏览器高度、宽度啥的。 复制代码 代码如下: 上面包车型地...

详细>>

使用javascript获取页面名称

代码很简单,就不多废话了,奉上代码: 复制代码 代码如下: // 取当前页面名称(不带后缀名) function getPageName1() {  ...

详细>>

javascript实现分享,javascript实现微信分享

代码很简单,笔者这里就非常少废话了,直接奉上源码: javascript落实微信分享,javascript达成分享 代码很简短,作者...

详细>>

JSON取值前推断

复制代码 代码如下: JSON取值前判断,JSON取值判断 复制代码 代码如下: public static void main(String[] args)throws Exception{   ...

详细>>