jQuery - 尺寸

最新推荐文章于 2024-08-13 08:58:30 发布

jony0303

最新推荐文章于 2024-08-13 08:58:30 发布

阅读量235

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/zjhwqx/article/details/52619512

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var txt="";
txt+="Width of div:"+$("#div1").width()+"<br />";
txt+="Height of div:"+$("#div1").height()+"<br />";
txt+="Inner width of div:"+$("#div1").innerWidth()+"<br />";
txt+="Inner height of div:"+$("#div1").innerHeight()+"<br />";
txt+="Outer width of div:"+$("#div1").outerWidth()+"<br />";
txt+="Outer height of div:"+$("#div1").outerHeight()+"<br />";
txt+="Outer width of div(margin include):"+$("#div1").outerWidth(true)+"<br />";
txt+="Outer height of div(margin include):"+$("#div1").outerHeight(true)+"<br />";
$("#div1").html(txt);
});
$("#btn2").click(function(){
var txt1="";
txt1+="Docment width/height:"+$(document).width();
txt1+="x"+$(document).height()+"\n";
txt1+="Window width/height:"+$(window).width();
txt1+="x"+$(window).height();
alert(txt1);
});
$("#btn3").click(function(){
$("#div1").width(500).height(600);
});
});
</script>
</head>
<body>
<div id="div1" style="width:300px;height:400px;padding:20px;margin:3px;border:5px solid blue;background-color:lightblue;"></div>
<br />
<button id="btn1">显示 div 的尺寸</button>
<button id="btn2">显示文档和窗口尺寸</button>
<button id="btn3">调整div的尺寸</button>
<p>width()-返回div元素的宽度</p>
<p>height()-返回div元素的高度</p>
<p>width()-返回div元素的宽度（包括内边距）</p>
<p>height()-返回div元素的高度（包括内边距）</p>
<p>width()-返回div元素的宽度（包括内边距和边框）</p>
<p>height()-返回div元素的高度（包括内边距和边框）</p>
<p>width()-返回div元素的宽度（包括内边距和边框和外边距）</p>
<p>height()-返回div元素的高度（包括内边距和边框和外边距）</p>
</body>
</html>