• dom操作获取长/宽/距离等值的若干方法


    1、offsetLeft:获取元素边框以外至文档顶的距离;若其祖先元素有定位属性position则返回值为元素到该定位元素的距离,不包括祖先元素的三宽(padding,border,margin),且该属性为只读。

    2、offsetTop:同上;

    3、scrollHeight:内容高 + padding  (含超出盒子范围的高度,用于原生JS里面获取元素高宽值);

    4、clientHeight:内容高 + padding (不含超出盒子范围的高度,用于原生JS里面获取元素高宽值);

    5、offsetHeight: 内容高 + padding + border (不含超出盒子范围的高度,用于原生JS里面获取元素高宽值);

    6、scrollTop:获取滚动条距顶或左端的距离;

    7、document.documentElement.clientHeight:(其中documentElement表示文档根元素,即HTM元素)
    获取当前浏览器窗口的高宽,不含滚动条(兼容所有浏览器)。

    8、document.documentElement.offsetHeight:
    返回文档的实际高度,包括其内顶底元素的外边距(兼容所有浏览器)

    9、document.body.clientHeight:
    获取整个文档的高宽,超出容器大小的忽略不计,包含文档顶底元素的内外边距值,若其内包含决对定位的元素,不包括在计算范围之内。若文档为空时,
    高度返回0,宽度返回浏览器窗口宽(兼容所有浏览器)。

    10、document.body.scrollHeight:
    获取文档的实际高度,超出容器范围加入计算,包括文档顶底元素的内外边距,若其中有绝对定位的元素,亦包含在计算范围之内,当文档内容小于
    窗口高度时,返回值为浏览器窗口高,反之为实际文档高。

    11、document.body.offsetHeight:
    获取文档的总高度,包含文档顶底元素的padding、border,不含margin,不包括绝对定位的元素高宽。

    12、设置或返回网页卷起的高度,窗顶到文档顶的距离。
    document.body.scrollTop:(适合谷歌浏览器)
    document.documentElement.scrollTop:(适合火狐和IE浏览器)
    window.scrollY和window.scrollX:得到IOS中当前窗口的y轴和x轴滚动条的值。
    注意:当使用document.documentElement.scrollTop = document.body.scrollTop =100;设置滚动条的高度时,需人为触发事件调动该方法,若想达到页面加载完成即滚动到指定位置,
    需要使用jquery方法 $("html,body").animate({"scrollTop": "300px"}, 10);

    13、window.screen.height:返回电脑屏幕的高宽。

    14、window.innerHeight
    返回浏览器窗口高宽,包含滚动条宽度值在内,不含工具栏。适用所有浏览器不包括小于9版本的IE浏览器。
    通吃的写法为:var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;宽度同理。
    本人前端水平有限,写的知识点可能有谬误,欢迎留言指正,如果看到,我将第一时间回复。感谢支持!
  • 相关阅读:
    MySQL存储过程
    [转载]JDBC应该始终以PreparedStatement代替Statement
    Restlet入门例子 RESTful web framwork for java
    Cglib的使用方法(3)Mixin
    HDOJ_1220
    精华:OracleHelper类
    web.config详解
    ADO.NET结构
    字典树
    WCF、Net remoting、Web service概念及区别
  • 原文地址:https://www.cnblogs.com/qddyh/p/10411140.html
Copyright © 2020-2023  润新知