Jquery 的outerHeight方法使用介绍

获取第一个匹配元素外部高度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

outerHeight(options)

optionsBoolean默认值:'false'

设置为 true 时，计算边距在内。

描述:
获取第一段落外部高度。

HTML 代码:


代码如下:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:


代码如下:

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

结果:


代码如下:

<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

赞 (0)

相关推荐

  • jQuery获得包含margin的outerWidth和outerHeight的方法

    本文实例讲述了jQuery获得包含margin的outerWidth和outerHeight的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(fun

  • jQuery获得document和window对象宽度和高度的方法

    本文实例讲述了jQuery获得document和window对象宽度和高度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){

  • jQuery中的height innerHeight outerHeight区别示例介绍

    标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距 html代码: 复制代码 代码如下: <div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj<

  • jQuery中outerWidth()方法用法实例

    本文实例讲述了jQuery中outerWidth()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部宽度. 默认情况下外部高度是宽度(width).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerHeight()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerWidth(options) 参数列表: 参数

  • jQuery帮助之CSS尺寸(五)outerHeight、outerWidth

    以便更好控制元素来满足我们的要求,那么我们可以通过outerHeight(options)和outerWidth(options)来获取到这部分的高度和宽度. outerHeight(options) 获取第一个匹配元素外部高度(默认包括补白和边框). 此方法对可见和隐藏元素均有效. 返回值:Integer 参数: options(Boolean) : (false) 设置为 true 时,计算边距在内. 示例: 获取第一段落外部高度. HTML 代码: <p>Hello</p>&

  • Jquery实现鼠标移动放大图片功能实例

    Jquery实现鼠标移动放大图片功能实例

    本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一会就把自己搞糊涂了,使用jquery技术直接根据标签的id,class等等,就可以辨识出来触发条件,直接作出回应(百度百科上说这是jquery很大的一

  • jQuery中outerHeight()方法用法实例

    本文实例讲述了jQuery中outerHeight()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部高度. 默认情况下外部高度是高度(height).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerWidth()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerHeight(options) 参数列表: 参

  • jQuery设置指定网页元素宽度和高度的方法

    本文实例讲述了jQuery设置指定网页元素宽度和高度的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("

  • Jquery 的outerHeight方法使用介绍

    获取第一个匹配元素外部高度(默认包括补白和边框). 此方法对可见和隐藏元素均有效. outerHeight(options) optionsBoolean默认值:'false' 设置为 true 时,计算边距在内. 描述: 获取第一段落外部高度. HTML 代码: 复制代码 代码如下: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: 复制代码 代码如下: var p = $("p:first");

  • jQuery动画animate方法使用介绍

    复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin

  • jQuery trigger()方法用法介绍

    jQuery的trigger()方法用法介绍: 此方法可以触发匹配元素上指定类型的事件. 它具有两种语法格式,下面就分别做一下介绍. 语法结构一: 复制代码 代码如下: $(selector).trigger(event,[param1,param2,...]) 参数解析: 1.event:必需,规定匹配元素要触发的事件,可以是自定义事件,也可以是标准的事件. 2.param:可选,传递给事件处理函数的参数. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&

  • JQuery的常用选择器、过滤器、方法全面介绍

    1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b. var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var c

  • jQuery过滤选择器:not()方法使用介绍

    jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf

  • JQuery onload、ready概念介绍及使用方法

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 复制代码 代码如下: $(function(){ // do something }); 其实这个就是jq ready

  • JQuery中serialize()、serializeArray()和param()方法示例介绍

    下面是服务器端的jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); String content = r

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • jquery中post方法用法实例

    本文实例讲述了jquery中post方法的用法,分享给大家供大家参考.具体用法分析如下: 在使用jquery实现网站的异步交互时,常用的两个函数为get和post方法,get方法使用很简单,直接提交get请求即可,如果有参数,直接追加到url后面就行,但是使用post方法时,传递参数,需要和url分开写,使得传参变得麻烦了,不过这样做起来更安全一些,而且出现中文乱码的概率也要低一些(get方法传中文很多情况下会出现乱码现象),这里就详细介绍一下post是怎样传递参数的. 首先写一个html代码如

随机推荐