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方法 获取元素实际宽度高度的更多相关文章
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- jq 获取各个元素的宽度高度的方法
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- iframe父子页面相互调用方法,相互获取元素
父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...
- jquery获取元素与屏幕高度距离
a. onscroll事件 scroll是css样式中overflow的一个值,意思是显示滚动条;当一个元素的实际高度超过他的最大高度是,只要设置了overflow为scroll b. $(..).s ...
- jquery如何获取元素的滚动高度
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(documen ...
- js获取元素的滚动高度,和距离顶部的高度
jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...
- js 获取浏览器/网页宽度高度整理
网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- jq 获取元素的宽度时,如何取得小数部分
<!DOCTYPE html> <html> <head> <title></title> <meta name="arti ...
随机推荐
- QTP自带订票实现循环执行,參数化和将异常提示信息输出
做这个样例主要是为了积累一些较基础的知识,以便日后可參考学习 这个样例是一个订票的C/Sclient程序 一.业务需求: 1.实现异常和正常数据登录窗体,系统对数据进行校验 2.登录成功后.进行订票业 ...
- (十进制高速幂+矩阵优化)BZOJ 3240 3240: [Noi2013]矩阵游戏
题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=3240 3240: [Noi2013]矩阵游戏 Time Limit: 10 Sec M ...
- ios OpenCv的配置和人脸识别技术
作为一个好奇心非常重的人,面对未知的世界都想去一探到底. 于是做了个人脸识别的demo. 眼下国内的关于opencv技术文章非常少.都是互相抄袭.关键是抄个一小部分还不全.时间又是非常久之前的了,和如 ...
- android 给url添加cookie
前些天因为项目需要写了一个通过网络连接去服务端拿数据的方法,但是需要让程序添加上cookie,因为之前对cookie 没有怎么研究过(包括做web 那会也没有用过或者说很少用),所以 一时用起来不太会 ...
- Python笔记(八)
#-*-coding:utf-8-*- # Python内置函数 print abs(-45) # 绝对值函数 print divmod(7,2) # 返回一个包含商和余数的元组 # input(&q ...
- 当安装了ubuntu操作系统怎么也调用不出中文输入法时,可以用以下方式尝试解决。
卸载 fcitx sudo apt-get remove fcitx 重启 sudo reboot 重新安装 fcitxsudo apt-get isntall fcitx 安装拼音输入法sudo a ...
- PHP验证器类Validator
Particle\Validator是一个小巧优雅的实用的PHP验证类库,提供了一个非常简洁的API.它无需依赖其他组件,提供友好的文档,并且有利于扩展. 安装 composer require pa ...
- 洛谷P4012 深海机器人问题(费用流)
题目描述 深海资源考察探险队的潜艇将到达深海的海底进行科学考察. 潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动. 深海机器人在移动中还必须沿途采集海底生物标本.沿途生 ...
- uva 11624 Fire! 【 BFS 】
按白书上说的,先用一次bfs,求出每个点起火的时间 再bfs一次求出是否能够走出迷宫 #include<cstdio> #include<cstring> #include&l ...
- GCC中的弱符号与强符号
GCC中的弱符号与强符号 我们经常在编程中碰到一种情况叫符号重复定义.多个目标文件中含有相同名字全局符号的定义,那么这些目标文件链接的时候将会出现符号重复定义的错误.比如我们在目标文件A和目标文件B都 ...