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
        };
    };
  • 相关阅读:
    Java spring自查笔记
    C#设置IP地址 用WMI
    idea换成护眼色
    WPF布局的6种面板
    spring注解
    c# 播放mp3
    Python 提示 “No matching distribution found for MySQLdb”
    Python3链接数据库报错:Connection.__init__() takes 1 positional argument but 5 positional arguments (and 1 keywordonly argument) were given
    安装Mysql数据库及配置相关环境变量
    Python中文件命名的注意事项
  • 原文地址:https://www.cnblogs.com/xiankui/p/3759798.html
Copyright © 2011-2022 走看看