jQuery - 尺寸

最新推荐文章于 2024-10-18 11:56:24 发布

原创最新推荐文章于 2024-10-18 11:56:24 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #innerWidth #outerWidth #尺寸

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

jQuery 尺寸方法

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

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

jQuery width() 和 height() 方法 jQuery innerWidth() 和 innerHeight() 方法

这四个方法的用法相同所以卸载一起：

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

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

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

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

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
    $("#button1").click(function(){
        var txt="";
        txt += "div 宽：" + $("#div1").width() + "<br>";
        txt += "div 高：" + $("#div1").height() + "<br>";
        txt += "div inner 宽：" + $("#div1").innerWidth() + "<br>";
        txt += "div inner 高：" + $("#div1").innerHeight() + "<br>";
        $("#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 id="button1">显示 inner div 的尺寸</button>
<button id="button2">显示 outer div 的尺寸</button>
<button id="button3">显示 outerWidth(true) div 的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p>


</body>
</html>

效果图：

jQuery outerWidth() 和 outerHeight() 方法

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

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

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

实例

<script>
$(document).ready(function(){
    $("#button2").click(function(){
        var txt="";
        txt += "div 宽：" + $("#div1").width() + "<br>";
        txt += "div 高：" + $("#div1").height() + "<br>";
        txt += "div outer 宽：" + $("#div1").outerWidth() + "<br>";
        txt += "div outer 高：" + $("#div1").outerHeight() + "<br>";
        $("#div1").html(txt);
    })
})
</script>

用法和innerWidth()、innerHeight()相同

效果图：

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

实例

<script>
$(document).ready(function(){
	$("#button3").click(function(){
		var txt="";
		txt += "div 宽：" + $("#div1").width() + "<br>";
		txt += "div 高：" + $("#div1").height() + "<br>";
		txt += "div outer 宽(margin included)：" + $("#div1").outerWidth(true) + "<br>";
		txt += "div outer 高(margin included)：" + $("#div1").outerHeight(true) + "<br>";
		$("#div1").html(txt);
	})
})
</script>

效果图：

jQuery - 更多的 width() 和 height()

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
</head>

<body>

<button id="button4">显示文档和窗口的尺寸</button><script>$(document).ready(function(){$("#button4").click(function(){var txt = "";txt += "文本窗口宽/高：" + $(document).width();txt += "x" + $(document).height() + "\n";txt += "浏览器窗口宽/高：" + $(window).width();txt += "x" + $(window).height();alert(txt);})})</script></body></html>

下面的例子设置指定的 <div> 元素的宽度和高度：

实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
</head>

<body>
<div id="div2" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button id="button5">调整 div 的尺寸</button>
<script>
$(document).ready(function(){
  $("#button5").click(function(){
    $("#div2").width(320).height(320);
  });
});
</script>

</body>
</html>