当前位置:编程学习 > 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);
 });
 
 
 
 
 
 
 
 
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,