jQuery 入门教程(18): 操作HTML元素的大小分析

你猜 阅读:220 2021-04-01 09:59:41 评论:0


jQuery 提供下面方法来控制HTML元素的大小:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

一般影响HTML元素 大小各部分的示意图如下所示:

20130309009

 

jQuery width()和height()方法

width()用来设置或取得元素的宽度,height()设置和取得元素的高度。

下面代码取得<div>元素的高度和宽度。

[javascript] view plain copy print ?
  1. $("button").click(function(){  
  2.    var txt="";  
  3.    txt+="Width: " + $("#div1").width() + "</br>";  
  4.    txt+="Height: " + $("#div1").height();  
  5.    $("#div1").html(txt);  
  6.  });  
$("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] view plain copy print ?
  1. $("button").click(function(){  
  2.    $("#div1").width(500).height(500);  
  3.  });  

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号