zoukankan      html  css  js  c++  java
  • 使用原生JS获取元素的位置与尺寸

    1、内高度、内宽度: 内边距 + 内容框
    clientWidth
    clientHeight
    2、外高度,外宽度: 边框 + 内边距 + 内容框
    offsetWidth
    offsetHeight
    3、上边框、左边框
    clientTop
    clientLeft
    4、元素的大小及其相对于视口的位置
    getBoundingClientRect()
    //xy:元素的左上角和父元素左上角的距离
    //width/height:边框 + 内边距 + 内容框
    //top:元素的上边界和父元素上边界的距离
    //left:元素的左边界和父元素左边界的距离
    //right:元素的右边界和父元素的左边界的距离
    //bottom:元素的下边界和父元素上边界的距离
    5、上边偏移量,左边的偏移量
    offsetTop
    offsetLest
    6、可视区域的大小
    document.documentElement.clientWidth
    document.documentElement.clientHeight
    7、页面的实际大小
    document.documentElement.scrollWidth
    document.documentElement.scrollHeight
    8、窗口左上角 与 屏幕左上角的 距离
    window.screenX、
    window.screenY
    9、屏幕宽高
    window.screen.width
    window.screen.height
    10、屏幕可用宽高(去除任务栏)
    window.screen.availWidth
    window.screen.availHeight
    11、窗口的外高度、外宽度
    window.outerWidth
    window.outerHeiht
    12、窗口的内高度、内宽度(文档显示区域+滚动条)
    window.innerWidth
    window.innerHeight
  • 相关阅读:
    11.7表单事件 定时器
    11.5真11.6 函数调用 数组字符串的定义和方法
    11.2 面向对象 解析
    11.1 js数据类型 作用域 原型链
    10.31js中级作用域链和this
    定时器
    生出对象的方式
    学习this
    字符串
    全局方法
  • 原文地址:https://www.cnblogs.com/lcf1314/p/9714015.html
Copyright © 2011-2022 走看看