zoukankan      html  css  js  c++  java
  • JavaScript高级程序设计之元素大小

    1、偏移量

    // 元素相对于文档的偏移量
    var getOffSet = function (ele) {
    
        var actualLeft = ele.offsetLeft,  // 相对于offsetParent元素的左位移
            actualTop = ele.offsetTop,
            current = ele.offsetParent;   // offsetParent元素
    
        // 循环到根元素,累加的就是相对于文档的偏移量
        while (current !== null) {
            actualLeft += current.offsetLeft;
            actualTop += current.offsetTop;
    
            current = current.offsetParent;
        }
    
        return {
            left: actualLeft,
            top: actualTop
        };
    };

    2、元素本身大小(border + padding + content)

    // 浏览器表现较为一致,只读属性
    ele.clientWidth
    
    // 浏览器表现较为一致,只读属性
    ele.clientHeight

    3、滚动大小

    // scrollWidth:在没有滚动条的情况下,元素的的总宽度。
    // scrollHeight:在没有滚动条的情况下,元素的总高度。
    // scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
    // scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
    
    // 但是文档的大小在各浏览器中差异较大,统一返回最大值:至少是窗口的大小
    var getDocSize = function () {
        var width, height;
    
        if (document.compatMode === "CSS1Compat") {
            width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
            height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
        } else {
            width = Math.max(document.body.scrollWidth, document.body.clientWidth);
            height = Math.max(document.body.scrollHeight, document.body.clientHeight);
        }
    
        return {
             width,
            height: height
        };
    };
  • 相关阅读:
    Percona: How to Restore MySQL Logical Backup at Maximum Speed
    MySQL之UNDO及MVCC、崩溃恢复
    MySQL checkpoint深入分析
    关于MySQL latch争用深入分析与判断
    InnoDB关键特性之刷新邻接页-异步IO
    InnoDB关键特性之自适应hash索引
    MySQL后台线程的清理工作
    MySQL IO线程及相关参数调优
    MySQL存储写入性能严重抖动分析
    MySQL的SQL预处理(Prepared)
  • 原文地址:https://www.cnblogs.com/xiankui/p/3759798.html
Copyright © 2011-2022 走看看