jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

以前写代码中,每当需要获取元素的实际“宽度”(这里的宽度是指元素宽度加上其边距)时,都需要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方法 ,很好用。完成了原来需要用一段来操作做的工作。

这个方法不适用于window 和 document对象,可以使用.width()代替。

下面是其简单介绍

outerWidth(options)

获取第一个匹配元素外部宽度(默认包括补白和边框)。

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

返回值:Integer 一个整数值 不带"px"

参数:

options(Boolean) : 默认值为false  设置为 true 时,计算边距在内。

示例:

获取第一段落外部宽度。

HTML 代码:

<div>

<div id="test" style="width:80px;margin:10px;"></div>

</div>

jQuery 代码:

var w = $("#test").outerWidth(true);

$("#test").html(w);

结果:

<div>

<div id="test" style="width:80px;margin:10px;">100</div>

</div>

outerHeight(options)

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

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

返回值:Integer

参数:

options(Boolean) : 默认值为false  设置为 true 时,计算边距在内。

示例:

获取第一段落外部高度。

HTML 代码:

<div>

<div id="test" style="height:20px;margin:10px;"></div>

</div>

jQuery 代码:

var h = $("#test").outerHeight(true);

$("#test").html(h);

结果:

<div>

<div id="test" style="height:20px;margin:10px;">40</div>

</div>

</div>

jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

时间: 2024-10-11 05:29:36

jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度的相关文章

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

jquery获取元素的宽度

jquery 是一个很好用的库,封装了很多易使用的简易 api,方便开发者进行 dom 操作. 今天讨论的是获取元素的宽度,有个小坑需要踩踩,这里记录下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style

jquery如何获取元素的宽度和高度

jquery如何获取元素的宽度和高度: 这当然是比较基础的问题,不过有可能初学者还是不够明了,下面就简单介绍一下. 获取元素的宽度: $(selector).width() 获取元素的高度: $(selector).height() selector是选择器,例如id.类和元素选择器登登. 原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4046.html 最为原始地址是:http://www.softwhy.com/forum.ph

LinkedList练习-队列获取元素方法、堆栈获取元素方法!

堆栈:如同一个水杯.先进后出. 队列:如同一个水管,先进先出. import java.util.*; class DuiDemo { private LinkedList link; DuiDemo() { link = new LinkedList(); } public void myAdd(Object obj)//对外提供一个添加元素的方法,调用LinkedList本身的方法以封装对外提供. { link.addFirst(obj); } public Object myGet()//

【代码笔记】获取字符串的宽度,高度

一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //获取字符串的宽度 NSLog(@"获得字符串的宽度:%f",[self widthForString:@"我爱你!我爱你!我爱你!我爱你!我爱你!我爱你!我爱你!我爱你!" fontSize:10.0 andHeight:

js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

Jquery 根据 Style&quot;display:none&quot; 获取元素

$(".sort_Panel:hidden").size(): //查找隐藏的元素 -------------------------------------------- $(".sort_Panel:visible").size(): //查找显示的元素  

android安卓onCreate方法中获取控件宽度高度

ViewTreeObserver vto = imageView.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { public void onGlobalLayout() { imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this); int height=imageView.getHeight();

Select input 两个元素的宽度高度跟设定值不一致的问题

在做登录框的时候,需要一个select 元素作为账号输入,一个input作为密码输入框.在css 文件中,将这两个元素的position 设置为relative ,并且width 设置为100%.刷新页面后发现,两个元素的长度居然不是一样的.最终在stackoverflow 中找到了答案.原来,实际宽度 = width + padding + border,实际高度 = height + padding + border .要想自己设定的width 或者height 就是实际的宽度或者高度,可以