欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript DOM 常用尺寸

程序员文章站 2022-06-27 20:11:34
JavaScript 操作 DOM 时经常会用到一些尺寸，本文介绍怪异模式和标准模式下的滚动条距离、窗口尺寸、文档尺寸、元素文档坐标的兼容性写法以及窗口滚动到指定位置的方法 ......

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
// 窗口可视高度 + 垂直滚动条滚动距离 >= 文档滚动高度
// 注意写兼容性

上一篇： 如何使用H5的video实现全屏时横屏播放，手势上下滑动调节音量，左右滑动快进和后退

下一篇： HTML颜色构成及写法和常见颜色代码值

推荐阅读