• javascript位置相关知识点整理


    1、css指定元素的位置采用的是文档坐标;

    2、js查询元素位置的方法返回的是元素在视口中的位置,即视口坐标;

    如何获得元素的位置和尺寸

    获得元素的位置和尺寸可以通过getBoundingClientRect(),该方法返回的是视口坐标(值包含边框和内边距,不含外边距);

    Element.getBoundingClientRect()不支持老式浏览器,可以用offsetWidth,offsetHeight,offsetLeft,offsetTop,clientWidth,clientHeight,clientLeft,clientTop,scrollWidth,scrollHeight,scrollLeft,scrollTop(这些都是Element对象,scrollTo是window对象)

    offsetWidth,offsetHeight返回值包含内容和内边距和边框,不包含外边距

    clientWidth,clientHeight返回值包含内容和内边距,不包含边框和外边距;对于内联元素这两个值总是0

    scrollWidth,scrollHeight返回值包含内容和内边距以及溢出的部分,不包含边框和外边距,当无溢出时和clientWidth,clientHeight相等

    offsetLeft,offsetTop对于大部分元素都是文档坐标,但对于已定位的元素的后代元素和一起其他元素(表格)返回的是相对于祖先元素的坐标

    clientLeft,clientTop基本不用

    scrollLeft,scrollTop指定滚动条滚动到指定的位置

    如何获取滚动条位置:

    可以通过(pageXOffset,pageYOffset,ScrollX,ScrollY:window对象),(scrollLeft,scrollTop:Element对象),来获得滚动条的位置

    window.pageXOffset,window.pageYOffset

    window.ScrollX,window.ScrollY

    正常模式下:

    document.documentElement.scrollLeft,document.documentElement.scrollTop

    怪异模式下:

    document.body.scrollLeft,document.body.scrollTop(360极速模式就是怪异模式)

    如何让滚动条滚动到指定位置:

    window.scrollTo();参数为x和y方向上的位置,指定数值多少就跳转到多少

    window.scrollBy();参数为x和y方向上的相对值,在原有基础上增加

  • 相关阅读:
    dhcp服务
    lvm逻辑卷扩容报错解决
    xshell连接linux使用vim无法正常使用小键盘
    OracleXETNSListener无法启动或启动停止
    RF常用关键字
    pytest的初始化清除操作
    pytest特点与执行
    flask 简单示例
    python操作redis
    centos7安装redis
  • 原文地址:https://www.cnblogs.com/diantao/p/4640973.html
Copyright © 2020-2023  润新知