解释 : 获取页面元素宽高方法及图解

JSoffsetWidth\offsetleft <wbr>等图文解释

网页可见区域宽: 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;

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

HTML控件offsetTop、scrollTop等属性

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

时间: 2024-08-26 04:14:29

解释 : 获取页面元素宽高方法及图解的相关文章

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

jQuery中几个关于元素宽高方法的区别

几个关于元素宽高的方法 height():带参数设置,不带参数获取,参数是number类型 width():带参数设置,不带参数获取,参数是number类型 innerHeight() :内边距+内容的高度 innerWidth() :内边距+内容的宽度 outerHeight:上下内边距+内容+上下边框 outerWidth :左右内边距+内容+左右边框 案例测试: <!DOCTYPE html> <html lang="en"> <head> &

js获取屏幕元素宽高值

屏幕分辨率的宽高:window.screen.width  / window.screen.height 屏幕可用工作区宽高:window.screen.availWidth / window.screen.availHeight 网页可见区域宽高:document.body.clientWidth / document.body.clientHeight 网页可见区域宽高:document.body.offsetWidth / document.body.offsetHeight(包括边线)

JS与JQ 获取页面元素值的方法和差异对比

获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 $(document).width() ==> 浏览器可见区域宽度$(document).height() ==> 浏览器可见区域高度 获取对象的高度和宽度 obj.width = obj.style.width   ==> 获元素内容宽度obj.cl

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css

窗口尺寸,文档高,元素宽高的获取方式

一.元素宽高: window.onload = function() {    var oDiv = document.getElementById('div1');     /*        width height        style.width : 样式宽        clientWidth : 可视区宽        offsetWidth    : 占位宽    */        alert( oDiv.style.width );    //100    alert( o

页面宽高,窗口宽高,元素宽高,元素位置,页面滚动距离

页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height(不包括margin) document.body.scrollWidth/Height(包括margin) tips: 1.如果不是最大化浏览器窗口,且在body标签设置min-width,document.body.offsetWidth会比document.body.clientWidth多出2px,那就是滚动条旁边的2px空白

[转载]用Javascript获取页面元素的位置

原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那