你好,欢迎来到电脑编程技巧与维护杂志社! 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:技术专栏 / Java专栏
jQuery 入门教程(18): 操作HTML元素的大小
 
jQuery 提供下面方法来控制HTML元素的大小:
 
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
一般影响HTML元素 大小各部分的示意图如下所示:
 
 
20130309009
 
 
jQuery width()和height()方法
 
width()用来设置或取得元素的宽度,height()设置和取得元素的高度。
 
下面代码取得<div>元素的高度和宽度。
 
[javascript]  
$("button").click(function(){  
   var txt="";  
   txt+="Width: " + $("#div1").width() + "</br>";  
   txt+="Height: " + $("#div1").height();  
   $("#div1").html(txt);  
 });  
 
$("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的高度和宽度。
 
下面的例子设置指定 
 
元素的宽度和高度:
[javascript]  
$("button").click(function(){  
   $("#div1").width(500).height(500);  
 });  
 
$("button").click(function(){
   $("#div1").width(500).height(500);
 });
 
  推荐精品文章

·2024年12月目录 
·2024年11月目录 
·2024年10月目录 
·2024年9月目录 
·2024年8月目录 
·2024年7月目录 
·2024年6月目录 
·2024年5月目录 
·2024年4月目录 
·2024年3月目录 
·2024年2月目录 
·2024年1月目录
·2023年12月目录
·2023年11月目录

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备14022230号-1,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区远大路20号宝蓝大厦E座704,邮编:100089