js get 属性事件.onclick 相当于给对象添加了一个属性属性值是一个函数一点击就会触发 onmouse

.onclick 相当于给对象添加了一个属性属性值是一个函数一点击就会触发

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮被按下

onmousedown 鼠标按钮抬起的时候触发

添加className 一个或者多个*

div.className = 'bg c'

移除className

div.className = ''

<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>
        .div1{
            width: 200px;
            height: 2000px;
            padding: 10px;
            margin: 5px;
            border: 2px solid #ccc;
            /* position: fixed;
            left:20px;
            top:10px; */
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            top:30px;
            left:30px;
        }
    </style>
</head>
<body>
    
    <div class="div1">
        <!-- <div class="c"></div> -->
    </div>
    <button onclick="getScroll()">获取滚动条顶部的距离</button>
    <script>
        let divDom = document.querySelector('div')
        /* width 只是content的宽度 */
        // console.log( window.getComputedStyle(divDom,null).width )
        /* offsetWidth = content 宽度 + 左右的padding + 左右的border */
        // console.log( divDom.offsetWidth );
        // console.log( divDom.offsetHeight );
        /* clientWidth = content 宽度 + 左右的padding */
        // console.log( divDom.clientWidth );
        // console.log( divDom.clientHeight );

        /* 在正常文档流下 offsetLeft（13） = body的margin-left（8） + divDom的margin-left（5） */
        /* 脱离文档流的情况下 offsetLeft（25） = divDom的left（20） + divDom的margin-left（5） */
        // console.log(divDom.offsetLeft);
        /* 在正常文档流下 offsetTop（8） = body的margin-top（8） */
        /* 脱离文档流的情况下 offsetTop（15） = divDom的top（10） + divDom的margin-left（5） */
        // console.log(divDom.offsetTop);

        /* offsetParent 自己相对于谁（父元素）偏移  */
        // console.log( divDom.offsetParent ); => body
        // let c = document.getElementsByClassName('c')[0];
        /* c是绝对定位 是相对于divDom偏移的 所以他的偏移父元素是divDom  */
        // console.log( c.offsetParent ); /* =>divDom */

        /* offsetParent 如果子元素的父元素是已经定位（relative,absolute,fixed）的元素,
        那么他的offsetParent就是已经定位的父元素
        如果不是已经定位的元素，那么他的offsetParent就是body
        */

        function getScroll(){
            /* 获取滚动条距离顶部的高度 */
            console.log( document.documentElement.scrollTop );
        }

        /* 滚动条 滚动事件 */
        document.onscroll = function (){
            console.log( document.documentElement.scrollTop );
        }


    </script>
    
</body>
</html>

width 只是content的宽度

offsetWidth = content 宽度 + 左右的padding + 左右的border

clientWidth = content 宽度 + 左右的padding

在正常文档流下 offsetLeft（13） = body的margin-left（8） + divDom的margin-left（5）

脱离文档流的情况下 offsetLeft（25） = divDom的left（20） + divDom的margin-left（5）

在正常文档流下 offsetTop（8） = body的margin-top（8）

脱离文档流的情况下 offsetTop（15） = divDom的top（10） + divDom的margin-left（5）

offsetParent 自己相对于谁（父元素）偏移

offsetParent 如果子元素的父元素是已经定位（relative,absolute,fixed）的元素, 那么他的offsetParent就是已经定位的父元素如果不是已经定位的元素，那么他的offsetParent就是body

js get 属性 事件

js get 属性事件