jQuery 提供多个处理尺寸的重要方法：
width()设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()返回元素的宽度（包括内边距）。
innerHeight()返回元素的高度（包括内边距）。
outerWidth()返回元素的宽度（包括内边距和边框）。
outerHeight()返回元素的高度（包括内边距和边框）。
outerWidth(true)返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true)返回元素的高度（包括内边距、边框和外边距）。
依照盒模型如下图：
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "px</br>";
txt+="Height: " + $("#div1").height() + "px</br>";
txt+="Inner width: " + $("#div1").innerWidth() + "px</br>";
txt+="Inner height: " + $("#div1").innerHeight()+ "px</br>";
txt+="Outer width: " + $("#div1").outerWidth() + "px</br>";
txt+="Outer height: " + $("#div1").outerHeight()+ "px</br>";
txt+="Outer width(含margin): " + $("#div1").outerWidth(true) + "px</br>";
txt+="Outer height(含margin): " + $("#div1").outerHeight(true)+"px";
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<button>显示 div 的尺寸</button>
</body>
- 大小: 61.3 KB
- 大小: 73.4 KB
分享到：
相关推荐
jQuery 1.3.2（2009年2月）：这次小版本升级进一步提升了库的性能，例如改进了:visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外，也支持查询的元素按文档顺序返回。 jQuery 1.4(2010年1月14号...
7.3 尺寸 113 7.3.1 height() 113 7.3.2 height(val) 113 7.3.3 width() 114 7.3.4 width(val) 114 7.3.5 innerHeight() 114 7.3.6 innerWidth() 115 7.3.7 outerHeight(options) 115 7.3.8 outerWidth(options) 116...
掌握jQuery操作元素尺寸和位置方法的使用 任务1 认识JQuery 什么是jQuery JavaScript Web前端开发技术 认识jQuery jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。...
8.16 jQuery AJAX错误的处理方法 8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章 jQuery常用算法 9.1 jQuery遍历算法 9.2 jQuery祖先算法 9.3 jQuery...
jQuery是一款免费且开放源...尺寸确保我们在显示“inline”的元素上获取适当的宽度和高度值。事件确保触发器数据传递给无线电点击事件处理程序；恢复：触发器复选框和广播单击事件相同；恢复：添加无线电点击触发测试。
尺寸 heigh([val|fn]) width([val|fn]) innerHeight() innerWidth() outerHeight([soptions]) outerWidth([options]) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ...
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 实例 ...
04.jQuery方法1 05.jQuery方法2 06.jQuery选择器(基础)至选择器(表单) 07.选择器(表单)至属性(CSS类) 08.属性(CSS类)至属性(值) 09.属性(值)至过滤(filter) 10.过滤(filter)至查找(offsetParent) 11.查找...
当我们在企业网站上显示图片列表的时候，经常要先将图片一一处理成标准尺寸 如果图片很多的话，我们一个一个处理的话，将会非常的痛苦 今天给大家推荐一个jQuery插件 它可以将你的图片平铺起来，作为...
combo：为组件增加默认的'mousedown'事件处理程序； combobox：可调用'setValues'方法来初始化默认显示文本的内容； combotreegrid：按回车键可选择高亮的行； panel：优化调整尺寸时的组件重绘的性能问题； filebox...
jQuery的基本使用、选择器、效果、样式操作、属性操作、元素操作、尺寸操作、位置操作、以及事件注册、事件处理、事件对象、拷贝对象、多库共存、部分插件的使用
尺寸 height([val|fn]) width([val|fn]) innerHeight() innerWidth() outerHeight([soptions]) outerWidth([options]) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ...
CSS基本属性处理 ...CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性width的值。这两个方法获取的是元素在页面中的实际高度宽度值，多用于数学
Picture cut 是一个 jQuery 插件，通过友好的方式实现漂亮的... 图像尺寸处理 图像裁剪 支持浏览器： Google Chrome Mozilla Firefox Apple Safari Opera Internet Explorer 7 截图： 标签：Picture
家在网站开发和web应用中常常需要处理图片，因为用户上传的图片往往尺寸大小各不相同，如何能够生成统一尺寸的缩略图往往是让我们头疼的问题，常规的方式基本都是使用后台程序PHP，JSP等处理上传后的图片，针对网站...
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案，比如，如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果，以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...
尺寸 height( [val] ) width( [val] ) innerHeight() innerWidth() outerHeight(options) outerWidth(options) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor ...
Cash是现代浏览器（IE11 +）的一种荒谬的jQuery替代方案，它提供了jQuery样式的语法来处理DOM。 利用现代浏览器功能来最小化代码库，开发人员可以在文件大小的一小部分使用熟悉的可链接方法。 与jQuery达到100％的...