jquery-尺寸

最新推荐文章于 2022-04-19 08:30:32 发布

清濛

最新推荐文章于 2022-04-19 08:30:32 发布

阅读量315

点赞数

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

本文链接：https://blog.csdn.net/xyy_933/article/details/51470314

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-尺寸</title>
<script src="jquerylib/jquery-1.12.3.js"></script>
<script>
$(document).ready(function(){
// width和height
// $("button").click(function(){
// var txt="";
// txt+="the width of div:"+$("div").width()+" ";
// txt+="the height of div:"+$("div").height();
// $("div").html(txt);
// });

// innerHeight和innerwidth
// $("button").click(function(){
// var txt="";
// txt+="the width of div:"+$("div").innerWidth()+" ";
// txt+="the height of div:"+$("div").innerHeight();
// $("div").html(txt);
// });

// outerHeight和outerWidth
// $("button").click(function(){
// var txt="";
// txt+="the width of div:"+$("div").outerWidth()+" ";
// txt+="the height of div:"+$("div").outerHeight();
// $("div").html(txt);
// });

// outerHeight(true)和outerWidth(true)
$("button").click(function(){
var txt="";
txt+="the width of div:"+$("div").outerWidth(true)+" ";
txt+="the height of div:"+$("div").outerHeight(true);
$("div").html(txt);
});

$("#windowbutton").click(function(){
var txt="";
txt+="the width of window:"+$(window).width()+"<br/>";
txt+="the height of window:"+$(window).height();
alert(txt);
});

//设置指定的div元素的宽度和高度
$("#change").click(function(){
$("div").width(500).height(500);
});
});
</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>

<button id="windowbutton">显示浏览器的尺寸</button>
<button id="change">设置指定div的宽度和高度</button>
</body>
</html>