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

2016-02-19 14:37 8 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐jQuery帮助之CSS尺寸(五)outerHeight、outerWidth,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

以便更好控制元素来满足我们的要求,那么我们可以通过outerHeight(options)和outerWidth(options)来获取到这部分的高度和宽度。

outerHeight(options)
获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部高度。
HTML 代码:

pHello/pp2nd Paragraph/p

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

结果:
pHello/ppouterHeight: 35 , outerHeight(true):55/p

outerWidth(options)
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部宽度。
HTML 代码:

pHello/pp2nd Paragraph/p

jQuery 代码:

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

结果:
pHello/ppouterWidth: 65 , outerWidth(true):85/p

来源:http://www.tulaoshi.com/n/20160219/1607364.html

延伸阅读
标签: Web开发
    css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。    在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。 1.多重背景 #backgrounds-...
标签: Web开发
今天我们为大家准备的JS+CSS霓虹灯效果,让你的文字像灯一样每一分每一秒都变色。 今天我们要用CSS和jQuery制作霓虹效果。现在我们开始第一步,制作一个背景。其中有2个不同颜色的文字版本。 要生成五颜六色的背景图象,您首先需要新建的Photoshop文件650px和300px文档,#141414的背景颜色。 使用您喜爱的字体写您的标题。 我使用了哥特式...
标签: Web开发
算是翻译吧,原文:http://15daysofjquery.com/style-sheet-switcheroo/12/ 可以应用的范围很广,尤其是用标准构架的网站,比如说pjblog就可以,只要通过简单的点击,就可以让网站在瞬间换个皮肤,当然可以通过其他方法实现,这里通过jquery来实现,优点是代码简洁,可读性强 首先放上代码 代码如下: $(document).ready(function() { &nbs...
标签: Web开发
原来css在同一个大括号内是让firefox优先认领,也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它,而不是像网上大多介绍的那样直接忽略。其实!important还有保护的作用,在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。例如:#nav a{color:red;} a{color:teal !important},通常,一个带有id名#nav的元素里的一个链...
标签: Web开发
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入到DOM中。它的语法结构为: load( url [, data][, callback] ) load()方法参数解释见下表: 参数名称 类 型 说 明 urlString请求HTML页面的URL地址data(可选)Object发送至服务器的key/value数据callback(可选)Function请求完成时的回调函数,无论...

经验教程

970

收藏

20
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部