当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript DOM 常用尺寸

JavaScript DOM 常用尺寸

2020年04月01日  | 移动技术网IT编程  | 我要评论

javascript dom 常用尺寸

javascript 操作 dom 时经常会用到一些尺寸，本文介绍怪异模式和标准模式下的滚动条距离、窗口尺寸、文档尺寸、元素文档坐标的兼容性写法以及窗口滚动到指定位置的方法

怪异和标准模式

  1. 浏览器在解析 css 时有怪异和标准两种模式，目的是为了向旧版本兼容
  2. 标准模式下浏览器会按 w3c 规范解析代码
  3. 怪异模式下按浏览器自身规范解析代码，一般会向后兼容 5 个版本
  4. 首句使用 <!doctype html>，则使用 html5 规范，即标准模式，不加这句则使用怪异模式
  5. 使用document.compatmode 返回 css1compat 表示处于标准模式，返回 backcompat 则为怪异模式

滚动条滚动距离

  1. 常见写法

    // 获取滚动条和上侧/左侧的距离，即页面滚动距离
window.pageyoffset/pagexoffset 
document.bady.scrolltop/scrollleft
document.documentelement.scrolltop/scrollleft
window.scrolly/scollx

  2. 兼容性表

    (b) 代表怪异模式，(s) 代表标准模式，c 代表 chrome，f 代表 firefox，o 代表 opera

    浏览器 ie6789(b) ie678(s) ie9(s) c(bs) o/f(b) o/f(s)
    documentelement 0 可用 可用 0 0 可用
    body 可用 0 0 可用 可用 0
    pageoffset undefined undefined 可用 可用 可用 可用
    scroll undefined undefined undefined 可用 可用 可用

  3. 兼容性写法

    function getscrolloffset() {
    if (window.pagexoffset) {
        return {
            top: window.pageyoffset,
            left: window.pagexoffset
        }
    }
    else return {
        top:document.body.scrolltop || document.documentelement.scrolltop,
        left:document.body.scrollleft || document.documentelement.scrollleft
    }
}

窗口可视尺寸

  1. 常见写法

    // 获取窗口可视区域宽高
window.innerwidth/innerheight // 包括滚动条 兼容ie9 及以上
// window.outerwidrh/outerheight 包含工具栏和滚动条，即浏览器窗口大小
document.documentelement.clientwidth/clientheight // 不包括滚动条 兼容 ie9 及以下标准模式
document.body.clientwidth/clientheight // 包括滚动条 兼容 ie9 及以下怪异模式

  2. 兼容性写法

    function getviewportsize() {
        if (window.innerwidth) {
            return {
                width: window.innerwidth,
                height: window.innerheight
            }
        } else {
            if (document.compatmode === 'backcompat') {
                return {
                    width: document.body.clientwidth,
                    height: document.body.clientheight
                }
            } else {
                return {
                    width: document.documentelement.clientwidth,
                    height: document.documentelement.clientheight
                }
            }
        }
    }

文档滚动尺寸

  1. 常见写法

    // 获取文档可滚动的总尺寸
document.body.scrollheight/scrollwidth
document.documentelement.scrollheight/scrollwidth
// 优先使用 body.scrollheight
// documentelement.scrollheight 在低版本 ie 存在问题

  2. 兼容性写法

    function getscrollsize() {
    if (document.body.scrollheight) {
        return {
            width: document.body.scrollwidth,
            height: document.body.scrollheight
        }
    } else return {
        width: document.documentelement.scrollwidth,
        height: document.documentelement.scrollheight
    }
}

元素文档坐标

  1. offsetparent

    元素无 fixed 定位时，offsetparent 为最近的非默认定位的父级元素，没有则返回 body

    元素有 fixed 定位时，offsetparent 返回 null

    body 的 offsetparent 为 null

  2. offsettop/offsetleft

    var div = document.getelementbyid("box");
div.offsettop/offsetleft // 相对 offsetparent 元素的偏移

  3. 获取元素在文档中的坐标

    function getelempositionindoc(elem) {
    var parent = elem.offsetparent,
        top = elem.offsettop,
        left = elem.offsetleft;
    while (parent) {
        top += parent.offsettop;
        left += parent.offsetleft;
        parent = parent.offsetparent;
    }
    return {
        top: top,
        left: left
    }
}

窗口滚动

  1. 常见写法

    // 滚动到 (x, y) 坐标
// window.scroll() 和 scrollto() 功能相同
window.scrollto(x, y);
window.scrollto({
   top: 100,
   behavior: 'smooth' // 平滑滚动
});

  2. 滚动到低部判断方法

    window.innerheight + window.pageyoffset >= document.body.scrollheight
// 窗口可视高度 + 垂直滚动条滚动距离 >= 文档滚动高度
// 注意写兼容性

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网