jQuery处理元素和浏览器窗口的尺寸

简介: jQuery 尺寸通过 jQuery,很容易处理元素和浏览器窗口的尺寸。jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()image.png元素的宽高 width() 和 height() 方法width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

jQuery 尺寸
通过 jQuery,很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法:

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


image.png

元素的宽高 width() 和 height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
下面的例子返回指定的 <div> 元素的宽度和高度:

实例

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>
</html>
执行后
image.png

内边距宽高(padding)innerWidth() 和 innerHeight()

innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度,包含内边距: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

</body>
</html>
image.png

外边距(margin) outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。

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

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

image.png
目录
相关文章
|
1月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
2月前
|
JavaScript
jQuery 尺寸
jQuery 尺寸
11 2
jQuery 尺寸
|
2月前
获取元素到浏览器顶部的距离
文章介绍了两种方法来获取页面元素到浏览器顶部的距离:使用元素的`getBoundingClientRect().top`属性和自定义函数`getElementTop`结合`offsetParent`和`offsetTop`属性。
79 1
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
17 2
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
24 6
|
2月前
|
JavaScript
jQuery 尺寸
jQuery 尺寸
13 1
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
34 2
|
3月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
17 1
|
3月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
32 0
|
3月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
38 0