文档的几何形状和滚动

Posted BluesQian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文档的几何形状和滚动相关的知识,希望对你有一定的参考价值。

一:文档坐标和视口坐标

  在顶级窗口和标签页中,“视口”只是实际显示文档内容的浏览器的一部分:它不包括浏览器的“外壳(如菜单,工具条和标签页)。针对框架页中显示的文档,视口只是定义了框架页的《iframe》”

  如果文档比视口小,或者说他还未出现滚动,则文档的左上角就是视口的左上角,文档和视口坐标系统就是同一个。但是,一般来说,要在两种坐标之间互相转换,必须加上或减去滚动的偏移量(scroll offset)。

  例如,在文档坐标中如果一个元素的Y坐标是200px,并且用户已经把浏览器向下滚动75px;那么视口坐标中元素的Y坐标就是275px。文档坐标比视口坐标更加基础,并且在用户滚动中不会发生变化。

  

二:查询元素的几何尺寸

  判定一个元素的尺寸和位置最简单的办法就是调用它的getBoundingClientRectangle()方法。他不需要参数,返回一个有left,right,top和bottom的属性。

var obox = document.getElementById("box");
var arr = obox.getBoundingClientRect();
console.log(arr.width)/*200*/

 三:总结

    var obox = document.getElementById("box");
    /*除了IE8及更早的版本外,其他的浏览器都可以用*/
    pageXOffset;
    pageYOffset;
    /*标准模式下的IE,任何浏览器*/
    document.documentElement.scrollLeft;
    document.documentElement.scrollTop;
    /*滚动条的位置*/
    document.documentElement.offsetHeight;
    document.documentElement.offsetWidth;
    /*元素的尺寸,以CSS像素返回它的屏幕尺寸,返回的尺寸包含元素的边框和内边距,出去了外边距*/
    obox.offsetWidth;
    obox.offsetHeight;
    /*元素的位置,返回x和y坐标*/
    obox.offsetLeft;
    obox.offsetTop;
    /*元素的尺寸,不包含边框大小,至包含内容和它的内边距。*/
    obox.clientWidth;
    obox.clientHeight;

 

以上是关于文档的几何形状和滚动的主要内容,如果未能解决你的问题,请参考以下文章

OpenCV-几何形状颜色识别 #导入MD文档图片#

dotnet OpenXML SDK 形状几何 Geometry 的计算公式含义

提升几何/空间查询形状

OpenCV中几何形状识别与测量

OpenCV中几何形状识别与测量

MongoDB 2dsphere 索引失败(几何形状错误?)