layout: 'page'
title: 'Dom盒子模型'
date: 2019-09-30 17:59:29
tags: JAVASCRIPT
categories: JAVASCRIPT
---
Dom盒子模型13个属性
- clientWidth/clientHeight：当前元素可视区的宽高（不带边框）
//=>获取当前页面一屏幕(可视区域)的宽度和高度
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight ||document.body.clientHeight- clientTop/clientLeft：获取(上/左)边框的宽度
- offsetWidth / offsetHeight：当前元素可视区的宽高（带边框）
- offsetParent：当前盒子的父级参照物
- offsetTop/offsetLeft:获取当前盒子外边框开始距离其父级参照物内边框的偏移量
- scrollWidth/scrollHeight：真实内容的宽高（不一定是自己设定的值，因为可能会存在内容溢出，有内容溢出的情况下，需要把溢出的内容也算上）+ 左/上PADDING，而且是一个约等于的值 （没有内容溢出和client一样）
//=>获取当前页面的真实宽高（包含溢出的部分）
document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight ||document.body.scrollHeight- scrollTop/scrollLeft:滚动条偏移量(在js盒子模型13个属性中，只有这个是可读写属性，其余都是只读属性)
获取当前元素所有经过浏览器计算的样式
- 标准浏览器(IE9+):window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象)
- IE6~8:[元素].currentStyle 获取经过计算的样式