jQuery 尺寸

jQuery 提供了 width()height()innerWidth()innerHeight()outerWidth()outerHeight() 用来处理元素和浏览器窗口的尺寸

jQuery 尺寸方法

jQuery 提供六个方法用来处理尺寸

  1. width()
  2. height()
  3. innerWidth()
  4. innerHeight()
  5. outerWidth()
  6. outerHeight()

jQuery 尺寸

jQuery Dimensions

jQuery width() 和 height() 方法

jQuery width() 方法设置或返回元素的宽度,不包括内边距、边框或外边距

jQuery height() 方法设置或返回元素的高度,不包括内边距、边框或外边距

下面的范例返回指定的 <div> 元素的宽度和高度

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

运行范例 »

jQuery innerWidth() 和 innerHeight() 方法

jQuery innerWidth() 方法返回元素的宽度,包括内边距

jQuery innerHeight() 方法返回元素的高度,包括内边距

下面的范例返回指定的 <div> 元素的 inner-width/height

$("button").click(function(){
  var txt="";
  txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度,包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

运行范例 »

jQuery outerWidth() 和 outerHeight() 方法

jQuery outerWidth() 方法返回元素的宽度,包括内边距和边框

jQuery outerHeight() 方法返回元素的高度,包括内边距和边框

下面的范例返回指定的 <div> 元素的 outer-width/height

$("button").click(function(){
  var txt="";
  txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

运行范例

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.