DOM学习笔记（二）

曾经终败给现在 2022-02-13 10:47 198阅读 0赞

# 盒子模型 #

## 盒子模型属性 ##

> 在JS中通过相关属性可以获取（设置）元素的样式 信息，这些属性就是盒子模型属性（基本上都是有关样式的）

## client ##

*  **clientTop**/ **clientLeft**：  
    *获取当前元素上 / 左边框的宽度*
 *  **clientWidth**/ **clientHeight**：  
    *获取当前元素可视区域的宽高（包括padding），和内容溢出无关，就是我们自己设置的宽高+padding*  
    **获取当前页面一屏（可视区域）的宽高**

document.documentElement.clientWidth || document.body.clientWidth 
     document.documentElement.clientHeight || document.body.clientHeight

## offset ##

*  **offsetTop** / **offsetLeft**：  
    *获取当前盒子距离父级参照物的偏移量（上偏移，左偏移）当前盒子的外边框~父级参照物的内边框*
 *  **offsetWidth** / **offsetHeight**：  
    *在client基础上+border*
 *  **offsetParent**  
    *当前盒子的父级参照物*

> **参照物**：同一个平面，元素的父级参照物和结构没有必然联系，默认他们的伏击参照物都是Body（当前平面最外层参照物），body的父级参照物是NULL。  
> **参照物可以改变**：构建出不同平面即可（使用z-index，但是这个属性只对定位有作用），所以改变元素的定位（opsition：relative/absolute/fixed）可以改变元素的父级参照物

## scroll ##

*  **scrollTop** / **scrollLeft**:  
    *滚动条卷去的高度或宽度*
 *  **scrollWidth** / **scrollHeight**：  
    *真实内容的宽高（不一定是自己设定的宽高，因为可能存在内容溢出，有内容溢出的情况下，需要把溢出的内容也算上）+padding，而且是一个约等于的值*  
    **获取当前页面的真实宽高（包括溢出部分）**

document.documentElement.scrollWidth || document.body.scrollWidth 
     document.documentElement.scrollHeight || document.body.scrollHeight

**浏览器纵向最小卷去值：0**  
**浏览器纵向最大卷去值：**

document.documentElement.scrollHeight - document.documentElement.clientHeight

***在JS13个盒子模型属性中，只有scrollTop / scrollLeft是“可读写”属性，其他都是可读属性***

## 通过JS和模型获取属性值的特点 ##

1.  获取的值都是数字，不带单位
2.  获取的都是整数，不会出现小数，(一般都四舍五入)，尤其是获取的偏移量
3.  获取的值都是复合样式值（好几个元素的样式组合在一起的值），如果想要获取单一样式值（例如：之获取padding），我们的盒子模型属性就操作不了

## 获取元素的某个具体样式值 ##

1.  **\[xxx\].style.width 操作获取**  
    只能获取元素行内样式（不写在行内上，就获取不到）
2.  **获取当前元素所有经过浏览器计算的样式**  
    经过计算的样式：只要当前元素可以在页面中呈现（或者浏览器渲染它了），那么它的样式都是被计算过的
    
     *  **标准浏览器（IE9+）**  
        window.getComputedStyle(\[元素\]，\[伪类，一般都写null\])，获取当前元素所有被浏览器计算过的样式（对象）
     *  **IE6~8**  
        \[元素\].currentStyle获取经过计算的样式