有時候我們需要設置寬度為整個浏覽器寬度的div,當然我們可以使用相對布局的方式做到這一點,不過我們也可以用jquery來實現。
. 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.show
{
width: 500px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="show"></div>
<script>
var browser_width = $(document.body).width();
$("div.show").css("width",browser_width);
$(window).resize(function() {
browser_width = $(document.body).width();
$("div.show").css("width",browser_width);
});
</script>
</html>
我們使用$(document.body).width()獲取浏覽器內容的寬度,在加載頁面的時候我們初始化該div的寬度為浏覽器頁面的寬度,然後每當浏覽器大小調整的時候,都會觸發resize函數,此時我們再次對該div的寬度進行調整。