很多时候会用到,做一下总结:
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 的元素)

本文总结了使用JavaScript和JQuery获取网页及元素的各种宽度和高度的方法,包括网页可见区域、全文宽高、滚动位置以及屏幕尺寸等属性的获取。对于开发者在布局和交互设计中调整元素大小和定位时非常实用。
1557

被折叠的 条评论
为什么被折叠?



