zoukankan      html  css  js  c++  java
  • 原生js获取元素的各种位置(大全)

    加给元素:

    • offsetLeft (距离定位父级的距离)
    • offsetTop (距离定位父级的距离)
    • offsetWidth (可视宽度)
    • offsetHeight (可视高度)
    • clientLeft (左边框宽度)
    • clientTop (上边框宽度)
    • clientWidth(width + padding)
    • clientHeight(height + padding)
    • scrollTop(纵向滚动距离)
    • scrollLeft(横向滚动距离)
    • scrollWidth(内容宽度)
    • scrollHeight(内容高度)

    getBoundingClientRect ( ) 返回值:对象 有6个属性

    • left(元素左侧相对于可视区左上角的距离)
    • right(元素右侧相对于可视区左上角的距离)
    • top(元素上边相对于可视区左上角的距离)
    • bottom(元素下边相对于可视区左上角的距离)
    • width(可视宽度)
    • height(可视高度)

    获取可视区宽高:

    • window.innerWidth
    • window.innerHeight
    • document.documentElement.clientWidth
    • document.documentElement.clientHeight

    屏幕宽高:

    • window.screen.width
    • window.screen,height

    获取文档宽高:

    • document.body.clientWidth
    • document.body.clientHeight
    • document.documentElement.scrollWidth
    • document.documentElement.scrollHeight
    • document.body.scrollWidth(如果内容宽度超过一屏,得到文档宽度;如果内容小于一屏,得到一屏的宽度)
    • document.body.scrollHeight (如果内容高度超过一屏,得到文档高度;如果内容小于一屏,得到一屏的高度)

    获取滚动条距离:

    • document.body.scrollTop
    • document.body.scrollLeft
    • window.scrollY
    • window.scrollX
    • document.documentElement.scrollTop
    • document.documentElement.scrollLeft
    • window.pageYOffset
    • window.pageXOffset
  • 相关阅读:
    java Math类方法使用
    线性逻辑回归与非线性逻辑回归pytorch+sklearn
    Java学习方向
    ubuntu16.04安装Anaconda+Pycharm+Pytorch
    迁移学习resnet
    简单的CNN图像分类datasets.MNIST/FashionMNIST
    pytorch学习2
    tools/build.c
    zBoot/Makefile
    tools/version.c
  • 原文地址:https://www.cnblogs.com/Ivy-s/p/7400776.html
Copyright © 2011-2022 走看看