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>
运行结果:
点击按钮后: