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

上一篇：如何批量复制幻灯片?PowerPoint轻松搞定
下一篇：怎么清除Windows 7搜索记录

看过《jQuery帮助之CSS尺寸(五)outerHeight、outerWidth》的人还看了以下文章更多>>

jQuery帮助之CSS尺寸(五)outerHeight、outerWidth 02-19
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,oute 02-19
JQuery 学习笔记选择器之五 02-19
jQuery toggle()设置CSS样式 02-19
JQuery CSS样式控制学习笔记 02-19
jquery CSS选择器笔记 02-19
jQuery 改变CSS样式基础代码 02-19
jquery tools之tooltip 02-19
如何在CSS中设定文本的尺寸 02-20
帮助你学习CSS的在线CSS工具网站 02-20

jQuery插件实现css3效果

标签： Web开发

css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果，但是目前支持css3的浏览器少之又少，往往了实现圆角效果要去写一堆代码，下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。 1.多重背景 #backgrounds-...

用CSS和jQuery制作霓虹效果

标签： Web开发

今天我们为大家准备的JS+CSS霓虹灯效果，让你的文字像灯一样每一分每一秒都变色。今天我们要用CSS和jQuery制作霓虹效果。现在我们开始第一步，制作一个背景。其中有2个不同颜色的文字版本。要生成五颜六色的背景图象，您首先需要新建的Photoshop文件650px和300px文档，#141414的背景颜色。使用您喜爱的字体写您的标题。我使用了哥特式...

动态调用css文件——jquery的应用

标签： Web开发

算是翻译吧，原文：http://15daysofjquery.com/style-sheet-switcheroo/12/ 可以应用的范围很广，尤其是用标准构架的网站，比如说pjblog就可以，只要通过简单的点击，就可以让网站在瞬间换个皮肤，当然可以通过其他方法实现，这里通过jquery来实现，优点是代码简洁，可读性强首先放上代码代码如下： $(document).ready(function() { &nbs...

css之!important

标签： Web开发

原来css在同一个大括号内是让firefox优先认领，也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它，而不是像网上大多介绍的那样直接忽略。其实!important还有保护的作用，在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。例如：#nav a{color:red;} a{color:teal !important},通常，一个带有id名#nav的元素里的一个链...

jQuery Ajax之load()方法

标签： Web开发

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为： load( url [, data][, callback] ) load()方法参数解释见下表：参数名称类型说明 urlString请求HTML页面的URL地址data（可选）Object发送至服务器的key/value数据callback（可选）Function请求完成时的回调函数，无论...

查看更多精彩>>