Js：DOM中的样式（包含行内样式、滚动样式、可见区域样式等）

这部分还在更新

1、 获取行内样式：元素.style.样式名称

2、 获取当前正在显示的样式（只能读，不能修改，想要修改要使用style）：

① 只有ie支持：元素.currentStyle.样式名称

② 其他浏览器：getComputedStyle(需要获取样式的元素，传递一个伪元素)

第二个参数一般传 null

该方法是 windows对象上中的方法

返回值：key是样式名，值是样式名的对象

③ 获取元素可见区的宽度和高度（不带px）：

1、 clientWidth - 包含width+padding

2、clientHeight - 包含width+padding

④ 获取元素整个的宽度和高度（不带px）：

1、 offsetWidth - 包含width+padding+border

2、 offsetHeight - 包含width+padding+border

⑤ 获取当前元素的定位父元素（获取到离当前元素最近的祖先定位，如果没有开启定位的祖先元素，则返回body）：

offsetParent - 包含width+padding+border

⑥ 获取当前元素相对于其定位父元素的水平偏移量：offsetLeft

⑦ 获取当前元素相对于其定位父元素的垂直偏移量：offsetTop

⑧ 获取滚动区域的宽度：scrollWidth

⑨ 获取滚动区域的高度：scrollHeight

⑩ 获取水平滚动条滚动的距离：scrollLeft

⑪ 获取垂直滚动条滚动的距离：scrollTop

当满足 scrollHeight - scrollTop == clientHeight ，说明垂直滚动条滚动到底

当满足 scrollWidth - scrollLeft == clientWidth， 说明水平滚动条滚动到底

onscroll事件：会在滚动条滚动的时候触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #app {
            /* position: relative; */
        }
        #box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="box1" style="border: 6px solid blue;"></div>
    </div>
    <script>
        window.onload = function() {
            let box1Dom = document.getElementById("box1")
            // 获取行内样式：元素.style.样式名称
            let borderWidth = box1Dom.style.borderWidth
            console.log('borderWidth',borderWidth) // 6px
            // 设置（可以增加，也可以修改）样式
            box1Dom.style.borderColor = 'purple'

            console.log('行内样式Width',box1Dom.style.width) // 获取不到

            /**
             * 获取当前正在显示的样式（只能读，不能修改，想要修改要使用style）：
             *  - 只有ie支持：元素.currentStyle.样式名称
             *  - 其他浏览器：使用windows对象上的 getComputedStyle() 方法，此方法接收两个参数：
             *     - 参数一：需要获取样式的元素
             *     - 参数二：传递一个伪元素，一般传null
             *     - 返回值：key是样式名，值是样式名的对象
            */
            let box1DomCurrentStyle = getComputedStyle(box1Dom, null)
            console.log('当前正在显示的样式Width',box1DomCurrentStyle.width) // 100px


            /**
             * 获取元素可见区的宽度和高度（不带px）：
             *   clientWidth - 包含width+padding
             *   clientHeight - 包含width+padding
            */
            let box1DomClientWidth = box1Dom.clientWidth
            console.log('box1Dom可见宽度',box1DomClientWidth) // 120px


            /**
             * 获取元素整个的宽度和高度（不带px）：
             *   offsetWidth - 包含width+padding+border
             *   offsetHeight - 包含width+padding+border
            */
            let box1DomOffsetWidth = box1Dom.offsetWidth
            console.log('box1Dom整个的宽度',box1DomOffsetWidth) // 130px


            /**
             * 获取当前元素的定位父元素（获取到离当前元素最近的祖先定位，如果没有开启定位的祖先元素，则返回body）：
             *   offsetParent - 包含width+padding+border
            */
            let box1DomOffsetParent = box1Dom.offsetParent
            console.log('box1Dom的定位父元素',box1DomOffsetParent) // body


            /**
             * 获取当前元素相对于其定位父元素的水平偏移量：offsetLeft
             * 获取当前元素相对于其定位父元素的垂直偏移量：offsetTop
            */
            let box1DomOffsetLeft = box1Dom.offsetLeft
            console.log('box1Dom相对于其定位父元素的水平偏移量',box1DomOffsetLeft) // 相对于body
        }
    </script>
</body>
</html>