常用元素位置与大小总结

JellyBool 发布于2019-08-19 18:21 / 2016人阅读

摘要：偏移量元素在垂直方向占据的空间大小内容高度上下上下元素在水平方向占据的空间大小内容宽度左右左右元素外边框距离的上内边框的距离元素外边框距离的左内边框的距离是一个只读属性，返回一个指向最近的，指包含层级上的最近包含该元素的定位元素。

偏移量

offsetHeight: 元素在垂直方向占据的空间大小 => 内容高度 + 上下padding + 上下boder

offsetWidth: 元素在水平方向占据的空间大小 => 内容宽度 + 左右padding + 左右boder

offsetTop: 元素外边框距离offsetParent的上内边框的距离

offsetLeft: 元素外边框距离offsetParent的左内边框的距离

offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；怪异模式下为 body）。当元素的 style.display 设置为 none 或定位为fixed时，offsetParent 返回 null

元素大小

clientWidth: 元素内容及内边距所占空间宽度, 不包含滚动部分

clientHeight: 元素内容及内边距所占空间高度, 不包含滚动部分

滚动大小

scrollLeft: 被隐藏在内容区域左侧的宽度(有横向滚动条时)

scrollTop: 被隐藏在内容上边区域的高度(有竖向滚动条时)

scrollHeight: 在没有滚动条时，元素内容的高度

scrollWidth: 在没有滚动条时，元素内容的宽度

常用位置和大小计算（标准模式）

浏览器可视区宽高

// 不包含滚动条
// width
document.documentElement.clientWidth
// height
document.documentElement.clientHeight

// 包含滚动条(ie9+, 不是css规范)
// width
window.innerWidth
// height
window.innerHeight

文档正文总宽高

// width
 Math.max(document.documentElement.scrollWidth, 
    document.documentElement.clientWidth);
// height 
Math.max(document.documentElement.scrollHeight, 
    document.documentElement.clientHeight);

// 注：由于各浏览器在scrollWidth和clientWidth表现不一致，  
// 所以需要取得最大值来获得准确的值；

// all
function getPageWH(){
    var d = document.documentElement;
    var sw = d.scrollWidth,
        sh = d.scrollHeight,
        cw = d.clientWidth,
        ch = d.clientHeight;
    return {
        width: Math.max(sw, cw),
        height: Math.max(sh, ch)
    };
}

元素滚动隐藏区域宽高

// top
el.scrollTop;
// left
el.scrollLeft;

//文档滚动大小
// top
document.body.scrollTop
// left
document.body.scrollLeft

元素距离文档顶部大小

// 当offsetParent为body时
// top
el.offsetHeight;

// 当offsetParent不为body时，需要一层层循环至offsetParent为null(通用方法)

// top
function getTop(el){
    var top = el.offsetTop,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetTop;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

元素距离文档左侧大小(与上面类似)

// left
el.offsetLeft;

// left 
function getLeft(el){
    var top = el.offsetLeft,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetLeft;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

元素距离视口顶部大小

// 元素距离视口顶部大小 = 元素距离文档顶部大小 - 文档正文垂直滚动高度；
function topToViewport(el){
    return getTop(el) - document.body.scrollTop;
}

元素距离视口左侧大小

// 元素距离视口顶部大小 = 元素距离文档左侧大小 - 文档正文水平滚动高度；
function leftToViewport(el){
    return getLeft(el) - document.body.scrollLeft;
}

判断元素是否在可视区

// 文档正文垂直滚动高度 < 可视区域范围 < (浏览器可视区高度+文档正文垂直滚动高度)
function isOnViewport(el){
    var offsetTop = getTop(el), // 元素距离顶部高度
        st = document.body.scrollTop, // 文档正文垂直滚动高度
        vh = document.documentElement.clientHeight;  // 视口高度

    return (offsetTop > st) && (offsetTop < st + vh);
}

判断是否滚动到底部

function isBottom(){
    var currentTop = document.body.scrollTop + document.documentElement.clientHeight;
    var totalTop = document.documentElement.offsetHeight;

    return currentTop == totalTop;
}

GPU云服务器云服务器 dom元素位置数组元素位置java js获取元素位置 html 查元素位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79485.html

DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

iOS122 2019-08-29 11:13 评论0 收藏0
DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

HackerShell 2019-08-01 15:41 评论0 收藏0
前端页面总结

摘要：重叠元素元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素属性指定了一个元素的堆叠顺序哪个元素应该放在前面，或后面一个元素可以有正数或负数的堆叠顺序具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。元素的默认值，没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位元素的位置相对于浏览器窗口是固定位...

番茄西红柿 2019-04-22 16:12 评论0 收藏0
前端基础入门二（CSS）

摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 评论0 收藏0
03.Android之View原理问题

摘要：这种自定义控件在原生控件提供的方法外，可以自己添加一些方法。从顶层父到子递归调用方法，方法又回调。目录介绍 3.0.0.1 View的绘制需要经过哪些过程？有哪些常用回调方法？View的绘制流程的详细流程是怎样的？ 3.0.0.2 View绘制流程，当一个TextView的实例调用setText()方法后执行了什么？请说一下原理…… 3.0.0.3 requestLayout()、...

FrozenMap 2019-08-16 14:14 评论0 收藏0