您的位置：首页 > Web前端 > JQuery

jQuery来了--尺寸，返回/设置元素的宽高度

2017-06-05 17:07 393 查看

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

jQuery处理尺寸的方法：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

width()和height()方法

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

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

例.

返回指定的

<div>

元素的宽度和高度：

<body>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt="Width:"+$("#div1").width()+"<br>"+"Height:"+$("#div1").height();
$("#div1").html(txt);
});
});
</script>

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

运行结果：

点击按钮后：

例.

设置指定的

<div>

元素的宽度和高度：

<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").width(350).height(320);
//等效于$("#div1").height(320).width(350);
//等效于 $("#div1").width(320);
$("#div1").height(320);
});
});
</script>

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

运行结果：

点击按钮后：

例.

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

<body>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt="文档尺寸："+$(document).width()+"x"+$(document).height()+"\n"+"窗口尺寸："+$(window).width()+"x"+$(window).height();
alert(txt);
});
});
</script>

<button>显示文档和窗口的尺寸</button>
</body>

运行结果：

点击按钮后：

innerWidth() 和 innerHeight() 方法

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

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

例.

返回指定的

<div>

元素的innerWidth或innerHeight：

<body>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt="innerWidth:"+$("#div1").innerWidth()+"<br>"+"innerHeight:"+$("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>

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

运行结果：

点击按钮后：

outerWidth() 和 outerHeight() 方法

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

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

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

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

例.

返回指定的

<div>

元素的outerWidth或outerHeight：

<body>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt="outerWidth:"+$("#div1").outerWidth()+"<br>"+"outerHeight:"+$("#div1").outerHeight()+"<br>"+"outerWidth(true):"+$("#div1").outerWidth(true)+"<br>"+"outerHeight(true):"+$("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>

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

运行结果：

点击按钮后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 尺寸元素宽高度浏览器窗口宽高度

相关文章推荐

新的分享

章节导航