JS助记 ----- 盒子模型与获取元素样式

盒子模型简单介绍

---

content-box

默认的盒子模型，width 和 height 设置的是 content 的大小，有border和padding的情况下再额外增加盒子的宽高，整个盒子的可视区大小由 border、padding、content 共同决定，border 和 padding 不会影响 content 的大小。

border-box

怪异盒子模型，width 和 height 设置的就是整个盒子可视区大小，如果给元素设置 border 和 padding 就会挤压 content 的大小，可视区大小不会改变。

助记：content-box 中的 content 指的是宽高用来设置 content 大小，border-box 中的 border 指的是宽高用来设置 border 及以内的大小。

在不同盒子模型下获取元素样式

---

元素对象.style.属性

该方法获取样式属性是直接获取元素内联样式，返回样式的字符串取值，如果没有设置内联样式则返回空串。不建议使用该方法获取元素样式，一般只用来元素样式的修改。

getComputedStyle(元素对象).属性

该方法获取的样式属性是元素当前设置的优先级最高的样式属性。在两种不同的盒子模型下获取元素宽高，对于 content-box 获取的是 content 的宽高，对于 border-box 获取的是 border 及以内的宽高。在两种不同的盒子模型下获取元素绝对定位偏移量均是以盒子的可视区域左上角为基准。

注意： 上面返回的是带单位的属性字符串取值。另外用该方法来获取绝对定位偏移量的时候必须给元素设置绝对定位，否则获取出来的是 auto。但是使用 offsetLeft 属性来获取偏移量时，不管你设置绝对定位与否都会获取出偏移量数值。

元素对象.clientHeight / clientWidth

• content-box： 元素对象.clientWidth = padding + width
• border-box： 元素对象.clientWidth = width - border

注意： 上面返回的数值。

元素对象.offsetLeft

获取的偏移量是以元素的可视区域左上角为基准，返回数值。