js 和 jquery的宽高

window 和 document :

window 对象表示浏览器打开的窗口，可以省略

document对象（浏览器的html文档）是window对象的一部分

document.body等于window.document.body

document.location === window.loacation

document.location.href === location.href(location是一个对象)

window相关的 width和height：

window.innerHeight是真的可视区域高度（除去了各种任务栏工具栏宽高，随窗口缩放或f12改变）

screen 的 width、height、availWidth、availHeight 是固定不变的

window.innerHeight 和 window.innerWidth 不兼容ie8及以下版本

兼容问题推荐使用 获取浏览器窗口可视区域大小

var w= document.body.clientWidth || document.documentElement.clientWidth;

var h= document.body.clientHeight || document.documentElement.clientHeight;

document(element)相关的 width和height：

1、document.body.clientHeight是元素真实高度 （无论有无任务栏工具栏遮掩及窗口缩放）tip:滚动条宽度约17px

clientHeight = content + 2.padding;

clientLeft和clientTop返回元素周围边框的厚度，如果不指定边框或者不定位元素，其值为0

即：

clientLeft = border-left-width;

clientTop = border-top-width;

2、document.body.offsetWidth是元素加入滚动条的整体宽度

offsetWidth = content + 2.padding + 2.(border-width)+滚动条;

所以滚动条宽度= offsetWidth - clientWidth

3、document.body.scrollHeight是元素实际的子元素内容高度

无滚动轴时：scrollHeight == clientHeight = style.height+2.padding;

有滚动轴时：scrollHeight == 实际子元素的高度+2.padding;

element.offsetLeft和element.style.left相对于父对象的左边距

document.getElementById("v1").offsetLeft 只读、数值、包括margin

document.querySelector("#v1").style.left 可读可写、字符串px

event对象坐标：

clientX和clientY ----> 相对于浏览器（可视区左上角0,0）的坐标

screenX和screenY ----> 相对于设备屏幕左上角的（0,0）的坐标

offsetX和offsetY ----> 相对于事件源左上角(0,0)的坐标

pageX和pageY ----> 相对于整个网页左上角(0,0)的坐标

js宽高实际应用

1、可视区域加载图片或元素
function showDiv(){
    var myPic=document.getElementById("showDiv");
    var clientH=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
    var picTop=myPic.offsetTop;
    if(picTop<=clientsH+scrollTop){
        myPic.classList.add("fadeInLeft");
        //图片延迟加载：把图片路径先放在一个属性中，再给src
    }
}
window.onscroll=showDiv;

classList H5新API

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

http://www.runoob.com/jsref/prop-element-classlist.html

2、网页滚动底部或顶部
function scrollTopBottom(){
    var myPic=document.getElementById("showDiv");
    var clientH=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
    var scrollTop=document.body.scrollTop;
    var wholeHeight=document.body.scrollHeight;
    if(scrollTop+clientH>=wholeHeight){
        alert("滚到底部了")；
    }
    if(scrollTop==0){
        alert("滚动到顶部了")
    }
}
window.onscroll=scrollTopBottom;

jquery的宽和高

$(ele).innerHeight() == ele.clientHeight

$(ele).outerHeight() == ele.offsetHeight

• .height() //元素本身高度
• .innerHeight() //在height的基础上加了padding值
• .outerHeight() //在innerHeight的基础上加了border
• .outerHeight(true) //在innerHeight的基础上加了border和margin

---

$(ele).position().left == ele.offsetLeft

整个元素算上margin、padding后的样子

• .offset() //获取匹配元素在当前视口的相对偏移
• .position() //获取匹配元素相对父元素的偏移

jquery宽高实际应用

1、可视区域加载图片或元素
$(window).scroll(function(){
    var clientH=$(window).height();
    var scrolltop=$(window).scrollTop();
    var picTop=$("#showDiv").offset().top;
    if(clinetH+scrollTop>=picTop){
        $("#showDiv").addClass("fadeInLeft");
    }
})