📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 前言
  • 1. 有没有document标签?
  • 1.1 网页的宽高与浏览器宽高
  • 2. 元素的宽高
  • 2.1 clientWidth
  • 2.2 document.documentElement.clientWidth()
  • 2.3 document.documentElement.scrollWidth()
  • 2.4 document.body.clientWidth()
  • 2.5 document.body.scrollWidth()
  • 2.6. Element.getBoundingClientRect
  • 2.7 Element.getClientRects()
  • 2.8 HTMLElement.offsetLeft()
  • 2.9 HTMLElement.offsetTop()
  • 2.10 window.getComputedStyle(element)
  • 3. jquery位置信息API

Was this helpful?

  1. JavaScript

元素的宽高位置信息梳理

PreviousREADMENextdom-align 源码浅析

Last updated 4 years ago

Was this helpful?

前言

日常开发中总会遇到要计算dom元素的位置大小的需求,每次都是用到再查资料,于是想着开始整理这部分知识,便于以后自己翻阅。

1. 有没有document标签?

html 文档最顶层的标签为html,没有document标签,于是给document标签添加css并没有效果。document是个抽象的概念,

document.body 返回文档中的 <body> 或 <frameset> 节点 document.documentElement 返回当前文档的直接子节点,一般是 <html> 节点

1.1 网页的宽高与浏览器宽高

网页宽度 = 浏览器窗口宽度 + 横向滚动距离 网页高度 = 浏览器窗口高度 + 竖向滚动距离

2. 元素的宽高

表示元素的内部宽度,以像素计,包括 padding。但不包括滚动条,border 和 margin。

表示不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度,包括 padding。但不包括滚动条(因为没有滚动条),border 和 margin。还包括伪元素的宽度,例如::before或::after。 如果元素的内容可以适合而不需要水平滚动条,则其scrollWidth等于clientWidth.

2.1 clientWidth

div {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
  // border-box:表示 width200 = padding20*2 + 160内容宽度,此时clientWidth即为200
}

div {
  width: 200px;
  padding: 20px;
  box-sizing: content-box;
  // border-box:表示 width240 = padding20*2 + 200内容宽度,此时clientWidth即为240
}

clientWidth 属性值会被四舍五入成整数,要获取小数的话,使用Element.getBoundingClientRect()

2.2 document.documentElement.clientWidth()

始终返回浏览器可视区域的宽度,即浏览器窗口的大小(无论内部是否有滚动),不包含滚动的宽度,即设置html,body及其它元素的宽度均不影响该值。

html {
  width: 4000px;      // 无关  只取决于可视区宽度
}

body {
  width: 3500px;      // 无关
}

#position {
  width: 3000px;      // 无关
}

2.3 document.documentElement.scrollWidth()

其值取决于网页中所有元素(html自身+子元素为所有元素)中 最宽的元素 ,(当子元素很宽的时候,可能将该元素宽度撑开)的width(即包含滚动的宽度),设置html,body及其它元素的宽度均会改变该值,但是 最小值 为document.documentElement.clientWidth(),即浏览器的可视区域宽度。

2.4 document.body.clientWidth()

取决于body标签的宽度值, 而body宽度值又取决于 html 设置的 css 宽度,但与 子元素 的css宽度无关(即使子元素宽度再宽也不影响该值)。

html {
  width: 2000px;
}

body {
  width: 3500px;    // 首先取值,没有该值则 `继承html的width`
}

#position {
  width: 3000px;  // 与该值无关
}

2.5 document.body.scrollWidth()

//1 
html {
}

body {
  width: 3500px;  如果body比子元素宽,则取body的值. 返回3500
}

#position {
  width: 3000px;
}

// 2
html {
  width: 4000px;
}

body {   // 不设置该值 则继承4000, 4000 > 3000 返回4000
}

#position {
  width: 3000px;
}

//3  
html {
  width: 4000px;
}

body {
}

#position {
  width: 5000px;  // 子元素更宽 取5000
}

获取元素相对于浏览器窗口左上角的定位属性值,当进行滚动时,该值可能会发生变化,因此如果想获取元素相对于整个网页左上角定位属性值:

那么只要给top、left属性值加上当前的滚动位置(通过document.documentElement.scrollLeft和document.documentElement.scrollTop),这样就可以获取与当前的滚动位置无关的值

Element.scrollTop 属性可以读取或设置该元素竖直滚动条到该元素顶部的距离。

Element.scrollLeft 属性可以读取或设置该元素水平滚动条到元素左边的距离。

不常用: 用于内部存在换行的情况。

<p style={{width: 60, padding: 0}} id='position'>
  <span>
    Paragraph that spans mutiple lines
  </span>
</p>

如上,当对 span 取 getBoundingClientRect时,会返回一个对象。而对 span 取 getClientRects时,由于p标签限制宽度,导致span换成五行,一个单词一行。则此时 getClientRects 返回五个单词各自的 getBoundingClientRect组成的集合。

offsetParent指向最近的父级定位元素

2.9 HTMLElement.offsetTop()

返回相对其offsetParent的顶部距离

获取element的计算样式(包含继承之后计算的值)。 如:window.getComputedStyle(element).color 获取颜色。

$ele.innerWidth ()  // content + padding

// 可传参,为true时,则将 margin 计算在内
$ele.outerWidth (isIncludeMargin)  // content + padding + border + (isIncludeMargin ? margin : 0)

$ele.width()  // content 不包含padding

$ele.css('width')  // content + padding + 'px'       // 返回值带有 'px',其它的 `API` 都是返回数字

// 返回或设置相关的定位信息
.offset()

2.6.

2.7

2.8

返回相对其的左侧距离。

2.10

3.

点击查看详情
Element.clientWidth
Element.scrollWidth
Element.getBoundingClientRect
Element.getClientRects()
HTMLElement.offsetLeft()
offsetParent
window.getComputedStyle(element)
jquery位置信息API