JQuery_处理元素和浏览器的窗口的尺寸

一、jQuery width() 和 height() 方法

　　width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

　　height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
      //alert($("#div1").width()); //获取这个元素的宽度，类型是number   跟$("#div1").css("width")获取到的是不一样的这样方法获取到的是string类型的数据
      //$('#div1').width(500);     //设置元素长度，直接传数值，默认加px
      //$('#div1').width('500pt'); //同上，设置了pt 单位
      $('#div1').width(function (index, value) { //index 是索引，value 是原本值
            return value - 100; //无须调整类型，直接计算
      });

   　 alert($("#div1").height());
         $('div').height(500); //设置元素高度，直接传数值，默认加px
      $('div').height('500pt'); //同上，设置了pt 单位
      $('div').height(function (index, value) { //index 是索引，value 是原本值
            return value - 1; //无须调整类型，直接计算
        });
    /*获取元素的宽高时是不包括border,padding,margin    类型是number方便与以后计算*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
        $("#div1").width(400).height(320);
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
</body>

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
        $("#div1").width(function(index,width){        //这种方法还可以传人一个参数即一个函数
            return width+500+"px";    //虽然可以不加px会智能的添加，但还是建议加上单位，这样更加清晰
        });
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
</body>

二、jQuery innerWidth() 和 innerHeight() 方法

　　innerWidth() 方法返回元素的宽度（包括内边距）。

　　innerHeight() 方法返回元素的高度（包括内边距）。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      alert($("#div1").innerWidth());
    　alert($("#div1").innerHeight());
    /*获取元素的宽高时是不包括border,margin、只包括padding*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>

三、jQuery outerWidth() 和 outerHeight() 方法

　　outerWidth() 方法返回元素的宽度（包括内边距和边框）。

　　outerHeight() 方法返回元素的高度（包括内边距和边框）。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      alert($("#div1").outerWidth());
    alert($("#div1").outerHeight());
    /*获取元素的宽高时是不包括margin、只包括padding,border*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>

　　这两个方法可以传入参数：true（表示包括margin）、false（表示不包括margin（默认））

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      alert($("#div1").outerWidth(true));//传入参数表示在获取元素的宽度的时候，不仅包括padding和border外，还包括margin
    alert($("#div1").outerHeight(false));
    /*获取元素的宽高时是包括margin,padding,border*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>

四、获取文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    var docW = $(document).width();
    var docH = $( document).height();
    var WocW = $(window).width();
    var WocH = $( window).height();
    var so = $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
    alert(docW);
    alert(docH);
    alert(WocW);
    alert(WocH);
    alert(so);

    //用一句话理解就是：当网页滚动条拉到最低端时，$(document).height() == $(window).height() + $(window).scrollTop()。
    //当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。
});
</script>
</head>
<body>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取浏览器窗口（视口）的宽度和高度</div>
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
</body>

不建议使用$("html").height()、$("body").height()这样的高度。原因：

$("body").height()：body可能会有边框，获取的高度会比$(document).height()小；

$("html").height()：在不同的浏览器上获取的高度的意义会有差异，说白了就是浏览器不兼容。

$(window).height()值有问题，返回的不是浏览器窗口的高度？原因：网页没有加上<!DOCTYPE>声明。

五、元素偏移方法：

　　 1、offset()

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
       //alert($("#div1").offset());//返回的是一个对象
       //alert($("#div1").offset().top);//div离视口顶端距离
       //alert($("#div1").offset().left);//div离视口左边距离
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0; margin-left:30px;">获取文档的宽度和高度</div>
</body>

　　2、position()

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
       alert($("#p1").position().left);//相对于div左边的定位是10px
	   alert($("#p1").offset().left);	//相对于视口左边的距离是20px
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div style="height:100px; width:200px; border:2px solid #0F0; position:relative">
    	<p id="p1" style="position:absolute; left:10px">获取文档的宽度和高度</p>
    </div>
</body>

　　3、scroll()

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
     	 alert($(window).scrollTop()); //获取当前滚动条的位置
		// $(window).scrollTop(300); //设置当前滚动条的位置
    });
});
</script>
</head>
<body>
    <div style="height:100px; width:200px; border:2px solid #0F0; position:relative">
    	<p id="p1" style="position:absolute; left:10px">获取文档的宽度和高度</p>
    </div>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
     <button>action</button>
</body>