Jquery使容器自适应浏览器窗口

来源：互联网发布：成龙facebook知乎编辑：程序博客网时间：2024/05/21 11:09

一、几个关键点

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>