js鼠标事件

onmouseover 鼠标移入

代码展示：

<div>我是div</div>
<script>
    let div = document.querySelector('div');
    div.onmouseover = function(){
        this.style.background = '#ccc';
    }// 鼠标移入div的时候背景div背景变成#ccc的颜色
</script>

onmouseover 鼠标离开

接着上述代码：

  <div>我是div</div>
<script>
    let div = document.querySelector('div');
    div.onmouseover = function(){
        this.style.background = '#ccc';
    }
    div.onmouseout = function(){
        this.style.background = '';
    }//鼠标移开后背景颜色消失
</script>

onmousedown 鼠标按下

代码展示：

    <div>我是div</div>
<script>
    let div = document.querySelector('div');
    div.onmousedown =function(){
        this.style.background = 'red';
    }// 鼠标点击后背景变成红色
</script>

onmouseup 鼠标松开

接着上述代码：

<div>我是div</div>
<script>
    let div = document.querySelector('div');
    div.onmousedown =function(){
        this.style.background = 'red';
    }
    div.onmouseup = function(){
        this.style.background = '';
    }// 鼠标松开后背景颜色消失
</script>

offse获取样式

.offsetParent 自己相对与父元素偏移 获取父元素

如果子元素的父元素是已经定位的元素，那么它的offsetParent就是已经定位的父元素，如果没有定位，那么就是body

其他属性例如：

<style>
    .div1{
        width: 200px;
        height: 200px;
        padding: 10px;
        margin: 5px;
        border: 1px solid #ccc;
    }
</style>
<div class="div1"></div>
<script>
   let divdom = document.querySelector('div')
    console.log(window.getComputedStyle(divdom,null).width); // 获取到div的宽度样式
</script>
<script>
   let divdom = document.querySelector('div')
   console.log(divdom.offsetWidth); // 这样写获取到div的全部宽度
</script>
<script>
   let divdom = document.querySelector('div')
   console.log(divdom.clientWidth); // 这样写也可以获取到div的全部宽度
    console.log(divdom.clientLeft);//这样写获取正常文档流下的body的margin-left + divdom 的margin-left 
    //脱离文档流 就是 let + margin-left
</script>

获取滚动条距离 onscroll

实时获取滚动条距离：

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

练习

有一个按钮点击一下出现一个div div里面写着我是div
.bg是在内部样式写的有宽200px高20epx和 1px #ccc灰色边框使用js 给div 添加上classname bg
classname .bg2红色背景白字鼠标移入div 显示出.bg2
鼠标移出div 显示原来的样式
点击div 可以获取到div的背景色

代码如下：

    <style>
    .bg{
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
    }
    .bg2{
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        background-color: red;
        color: white;
    }
</style>
<button>点我一下</button>
<script>
    let btn = document.querySelector('button');
    let body = document.querySelector('body');
    btn.onclick = function(){
        let div = document.createElement('div'); //新建div
        let divTex = document.createTextNode('我是div');//新内容
        div.appendChild(divTex); // 把内容加到div中
        body.appendChild(div); //把加完内容的div添加到body里
        div.className = 'bg'; // 给div加上.bg css样式 
        div.onmouseover =function(){ // 鼠标经过div事件
            this.className = ' bg2' //把div的css样式改为bg2
        }
        div.onmouseout = function(){ //鼠标离开div事件
            this.className = 'bg'; // 把div的css样式改为bg
        }
        div.onmousedown = function(){ //鼠标点击div事件
            let b = window.getComputedStyle(div,null).backgroundColor; // 声明b是获取div的背景颜色
            alert(b); 弹出b
        }
    }
</script>