js操作节点

1、鼠标事件

<script>
    let div = document.querySelector('div');
    div.onmousedown = function(){
        alert(div.innerHTML)
    }
    /* div 是一个dom对象 
    .onclick 相当于给对象添加了一个属性
    属性值 是一个函数 一点击就会触发 */
    // div.onclick = function (){
    //     alert('你好')
    // }
    /* onmouseover	鼠标移到某元素之上 */
    // div.onmouseover = function(){
    //     /*  '#ccc'十六进制的颜色值 */
    //     div.style.background = '#ccc'
    // }
    // /* onmouseout	鼠标从某元素移开 */
    // div.onmouseout = function(){
    //     div.style.background = 'none'
    // }
    /* onmousedown	鼠标按钮被按下 */
    // div.onmousedown = function (){
    //     alert('鼠标被按下，还没有松开的时候触发')
    // }
    /* onmousedown	鼠标按钮抬起的时候触发 */
    // div.onmouseup = function (){
    //     alert('鼠标抬起的时候触发')
    // }
</script>

2、添加className

<script>
    let div = document.querySelector('div')
    /* 添加className 一个或者多个*/
    div.className = 'bg c'
    div.onclick = function(){
        /* 移除className */
        div.className = ''
    }
</script>

3、获取元素样式

<script>
    let div = document.querySelector('div');
    /* 通过style在行内样式上获取样式 */
    /* 使用style获取样式 写的什么 就能获取到什么 
    不会转成rgb 和 出现其他的样式 */
    console.log('style',div.style.color )
    console.log('style',div.style.background )
    /* style是获取不到在内部样式上或者外部样式上的样式的 */
    // console.log( div.style.color )
    // /* font-size js中要是用驼峰的方式获取 */
    // console.log( div.style.fontSize )

    /* 使用window.getComputedStyle可以获取行内、内部、外部的所有样式
    但是 获得color是rbg格式的，获取的background是所有属性 */
    console.log( window.getComputedStyle(div,null).color )
    console.log( window.getComputedStyle(div,null).fontSize )
    console.log( window.getComputedStyle(div,null).background )
    console.log( window.getComputedStyle(div,null).height )

    // document.onscroll = function (){
    //     console.log(document.documentElement.scrollTop);
    // }

</script>

4、属性

<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>


<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>