js基础之DOM尺寸及位置

js基础之DOM尺寸及位置

一、DOM尺寸

以下表格属性中，前三种属性都是只读属性

属性	描述
box.style.width，box.style.height	只能获取到内联style属性的CSS样式中的宽和高，如果有，获取。如果没有，则返回空
getStyle(box, “width”)，getStyle(box, “width”)	通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小，它会返回元素的大小，如果本身没有设置，非IE浏览器会返回默认的大小，IE浏览器返回auto
box.clientWidth，box.clientHeight	返回了元素大小，但没有单位，默认单位是px，如果设置了其他的单位，比如100em之类，返回出来的结果还会转换为px像素（不含边框）
box.scrollWidth，box.scrollHeight	获取滚动内容的元素大小（当元素出现滚动条时，此属性指全部滚动内容的宽高）返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度
box.offsetWidth，box.offsetHeight	返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度包含盒模型中除margin以外的宽高（包含边框，最稳定，使用最频繁）

<div class="box">box</div>

.box {
    padding: 50px;
    height: 200px;
    width: 200px;
    background: red;
    border: 5px solid #000;
    margin: 20px;
}

const getStyle = (obj, attr) => {    //获取非行间样式，obj是对象，attr是值
    return obj.currentStyle ?  obj.currentStyle[attr] :  getComputedStyle(obj, false)[attr]
}

var div = document.querySelector("div")
console.log(getStyle(div, "height"))  // 200px，等于height
console.log(div.clientHeight)  // 300，等于height+padding
console.log(div.offsetHeight)  // 310，等于height+padding+border
console.log(div.style.height)  // 空，因为此时div没有内联样式设置高度

该div盒模型：

二、DOM位置

属性	描述
box.clientLeft，box.clientTop	获取左边框和上边框的宽度
box.offsetLeft，box.offsetTop	获取元素当前相对于offsetParent父元素的位置
box.scrollTop，box.scrollLeft	获取滚动内容上方的位置(就是隐藏的内容的高度)获取滚动内容左方的位置

offsetLeft及offsetTop会根据offsetParent来确认距离。offsetParent这个属性的返回值是它根据谁定位的，如果它的所有父元素都没有定位，那么返回body，类似定位中的绝对定位。

<div id="box">
	<p>只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空</p>
</div>

* {
    margin: 0;
    padding: 0;
}

#box {
    border: 50px solid #ccc;
    height: 400px;
    position: relative;
}

p {
    padding: 3px; 
    border-left: 5px solid #ddd;
    border-top: 10px solid #ddd; 
    position: absolute;
    left: 50px;
    top: 50px;
    height: 200px;
    width: 150px;
    overflow: scroll;
}

var p = document.querySelector("p")
console.log(p.clientLeft, p.clientTop)  // 5 10
// p的边框的外边缘到offsetParent边框的内边缘
console.log(p.offsetLeft, p.offsetTop)  // 50 50
p.onscroll = () => {
    console.log(p.scrollTop, p.scrollLeft)
}
console.log(document.body.offsetParent) // null

图例：

此时，p的父元素div有相对定位，那么p元素的offsetParent就是div。offsetLeft或offsetTop根据本身元素距离div的顶部或左侧距离来确定。

如果修改部分css，如下，clientTop及clientLeft不变。但因为p元素的父级元素中没有定位元素，那么此时p元素的offsetParent是body。

* {
    margin: 0;
    padding: 0;
}

#box {
    border: 50px solid #ccc;
    height: 400px;
}

p {
    padding: 3px; 
    border-left: 5px solid #ddd;
    border-top: 10px solid #ddd; 
    margin-left: 10px;
    height: 200px;
    width: 150px;
    overflow: scroll;
}

此时图例：