窗口、文档、视图、元素各种宽高

很多时候会用到,做一下总结:
Javascript:

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

JQuery:

    $(window).height(); //浏览器当前窗口可视区域高度
    $(document).height(); //浏览器当前窗口文档的高度
    $(document.body).height();//浏览器当前窗口文档body的高度
    $(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin
    $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)

    $(window).width(); //浏览器当前窗口可视区域宽度
    $(document).width();//浏览器当前窗口文档对象宽度
    $(document.body).width();//浏览器当前窗口文档body的宽度
    $(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin
    $(window).scrollLeft();//浏览器可视窗口顶端距离网页左侧的高度(水平偏移)

获取元素的宽高:

    $(obj).height(length);//获取或设置元素的高度(为length)
    $(obj).width(length);//获取或设置元素的宽度(为length)
    $(obj).innerHeight(true);//height+padding
    $(obj).innerWidth(true);//width+padding
    $(obj).outerHeight();//height + padding + border
    $(obj).outerWidth();//width + padding + border
    $(obj).outerHeight(true);//height+padding+border+margin
    $(obj).outerWidth(true);//width+padding+border+margin
$(obj).offset().left;//元素的左边界到body最左边的距离(在元素的包含元素不含滚动条的情况下)
$(obj).offset().top;//元素的上边界到body最顶部的距离(在元素的包含元素不含滚动条的情况下)
$(obj).position().left;//获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离
$(obj).scrollLeft(length);//返回或设置匹配元素的滚动条的水平位置

$(obj).offsetParent();//返回最近的祖先定位元素(定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素)

你可能感兴趣的:(jquery,js)