jQuery 提供下面方法来控制HTML元素的大小:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
一般影响HTML元素 大小各部分的示意图如下所示:
jQuery width()和height()方法
width()用来设置或取得元素的宽度,height()设置和取得元素的高度。
下面代码取得<div>元素的高度和宽度。
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery的innerWidth()和innerHeight()方法
innerWidth() 返回元素包括Padding的宽度,innerHeight()返回包括Padding的高度。
jquery的outerWidth()和 outerHeight()方法
outerWidth()返回包括 padding 和 border的宽度,outerHeight()返回包括padding 和 border的高度。
而outWidth(true)和 outHeight(true) 返回包括padding, border和margin的高度和宽度。
下面的例子设置指定
元素的宽度和高度:
$("button").click(function(){
$("#div1").width(500).height(500);
});
分享到:
相关推荐
jQuery经典入门教程,供学习交流,谢谢~
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
jQuery入门,jQuery入门,jQuery入门,jQuery入门
jquery入门教程.jquery入门教程
JQuery基础教程之第八章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第五章后面章节请看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery...
jQuery中文入门教程:基础的jQuery中文入门教程,很好的资源
juery 入门经典教程,详细、系统的介绍了jQuery的配置 基本操作及使用
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇
JQuery基础教程之第四章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
jquery入门jquery入门jquery入门jquery入门
JQuery基础教程之第六章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
jQuery中文入门教程.chm 很好的入门教程
jQuery入门教程.zip
jQuery插件之二:Simple Tree jQuery插件之二:Simple Tree jQuery插件之二:Simple Tree
jQuery 中文入门教程
教程概述 2:配置站点 3:jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤...
jQuery 入门教程,里面附上代码,包收益匪浅,不用去买书看,就这么简单!