Jquery使容器自適應瀏覽器窗口
阿新 • • 發佈：2017-05-06
cti -s meta 方法 jquer charset mar utf-8 ava
一、幾個關鍵點
1：當文檔大小改變時可以通過哪個事件來觸發？
resize([Data], fn) 可傳入data供函數fn處理。
示例：
$(window).resize(function(){ alert("Stop it!"); });
2：怎樣獲得瀏覽器窗口的寬度高度？
獲取當前瀏覽器窗口的寬度
$(window).width();
獲取第一段的寬
$("p").width()
獲取當前HTML文檔寬度
$(document).width();
3：怎樣賦值？
方法很多，可以通過css（...）、width(...)等
二、舉個例子
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery自適應demo</title> </head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ //初始化寬度、高度 $("#div1").width($(window).width()); $("#div1").height($(window).height()); //當文檔窗口發生改變時 觸發 $(window).resize(function(){ $("#div1").width($(window).width()); $("#div1").height($(window).height()); }) })</script> <body style="margin:0;"> <div id="div1" style="background:#09F"> 這是一個可以自適應窗口的DIV </div> </body> </html>
Jquery使容器自適應瀏覽器窗口