浏览器视口大小、HTML元素偏移量的获取

最新推荐文章于 2021-12-02 18:16:35 发布

单眼皮丶儿

最新推荐文章于 2021-12-02 18:16:35 发布

阅读量584

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Y_wq0616/article/details/82018906

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

获取浏览器（<html>/<body>）视口大小

这个函数首先检查document.compatMode属性，确定浏览器是否运行在混杂模式。大多数浏览器都运行在标准模式下，所以会自动执行else代码。

       function getViewport() {
            if (document.compatMode == "BackCompat") {
                return {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            } else {
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
        }

获取元素偏移量

下面函数可以准确获得元素相对于document的（左）偏移量，如果想得到上偏移量，只需将代码中所有的offsetLeft替换为offsetTop即可。

        function getElementLeft (element) {
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent;
            while (current !== null) {
                actualLeft += current.offsetLeft;
                current = current.offsetParent;
            }
            return actualLeft;
        }

单眼皮丶儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器视口大小、HTML元素偏移量的获取

获取浏览器（&lt;html&gt;/&lt;body&gt;）视口大小这个函数首先检查document.compatMode属性，确定浏览器是否运行在混杂模式。大多数浏览器都运行在标准模式下，所以会自动执行else代码。 function getViewport() { if (document.compatMode == "BackCompat"...
复制链接

扫一扫