DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery動態調整div大小使其寬度始終為浏覽器寬度
jquery動態調整div大小使其寬度始終為浏覽器寬度
編輯:JQuery特效代碼     
有時候我們需要設置寬度為整個浏覽器寬度的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的寬度進行調整。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved