jquery動態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
更新時間：2014年06月06日 10:14:03 作者：
需要設(shè)置寬度為整個瀏覽器寬度的div，當(dāng)然我們可以使用相對布局的方式做到這一點，下面是具體實現(xiàn)，大家可以參考下
有時候我們需要設(shè)置寬度為整個瀏覽器寬度的div，當(dāng)然我們可以使用相對布局的方式做到這一點，不過我們也可以用jquery來實現(xiàn)。
<!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()獲取瀏覽器內(nèi)容的寬度，在加載頁面的時候我們初始化該div的寬度為瀏覽器頁面的寬度，然后每當(dāng)瀏覽器大小調(diào)整的時候，都會觸發(fā)resize函數(shù)，此時我們再次對該div的寬度進行調(diào)整。
復(fù)制代碼 代碼如下:
<!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()獲取瀏覽器內(nèi)容的寬度，在加載頁面的時候我們初始化該div的寬度為瀏覽器頁面的寬度，然后每當(dāng)瀏覽器大小調(diào)整的時候，都會觸發(fā)resize函數(shù)，此時我們再次對該div的寬度進行調(diào)整。
相關(guān)文章
基于jquery的手風(fēng)琴圖片展示效果實現(xiàn)方法
這篇文章主要介紹了基于jquery的手風(fēng)琴圖片展示效果實現(xiàn)方法,涉及jQuery基于事件實現(xiàn)改變css樣式的方法,非常具有實用價值,需要的朋友可以參考下2014-12-12
測試代碼如下,本例子中設(shè)置的著色比較多，哈，都是隨便輸些數(shù)字進去的，感覺這樣更容易讓大家看到效果，呵，如果我的講的有哪不好麻煩大家多留言教導(dǎo)下^^2009-07-07
JQuery 操作select標(biāo)簽實現(xiàn)代碼
我們經(jīng)常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。2010-05-05
jQuery中的鏈?zhǔn)讲僮?，它讓代碼變得更有層次更簡潔，所以這篇文章主要給大家介紹了關(guān)于jQuery鏈?zhǔn)骄幊田L(fēng)格的相關(guān)資料,需要的朋友可以參考下2021-06-06
jQuery 中msgTips 頂部彈窗效果實現(xiàn)代碼
最近發(fā)現(xiàn)好多網(wǎng)站都采用頂部彈窗，并且不用用戶手動去點擊確定。感覺這樣很方便用戶，下面小編把實現(xiàn)代碼分享給大家，感興趣的的朋友一起看看吧2017-08-08
這篇文章主要介紹了jQuery實現(xiàn)簡潔的輪播圖效果,結(jié)合實例形式分析了jQuery的事件響應(yīng)機制與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery實現(xiàn)在HTML文檔加載完畢后自動執(zhí)行某個事件的方法
這篇文章主要介紹了jQuery實現(xiàn)在HTML文檔加載完畢后自動執(zhí)行某個事件的方法,結(jié)合實例形式分析了document的ready()事件自動加載執(zhí)行事件的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
JQuery EasyUI 結(jié)合ztrIee的后臺頁面開發(fā)實例
下面小編就為大家?guī)硪黄狫Query EasyUI 結(jié)合ztrIee的后臺頁面開發(fā)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了jQuery樹形控件zTree使用方法，zTree樹插件的基本使用方法，感興趣的小伙伴們可以參考一下2016-08-08
基于jQuery實現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09