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 = '';
}//鼠标移开后背景颜色消失
onmousedown 鼠标按下
代码展示：
<div>我是div</div>
<script>
let div = document.querySelector('div');
div.onmousedown =function(){
this.style.background = 'red';
}// 鼠标点击后背景变成红色
onmouseup 鼠标松开
接着上述代码：
<div>我是div</div>
<script>
let div = document.querySelector('div');
div.onmousedown =function(){
this.style.background = 'red';
}
div.onmouseup = function(){
this.style.background = '';
}// 鼠标松开后背景颜色消失
添加className属性
可以通过修改元素的className更改元素的样式，适用于样式多或是复杂的样式，在style里面写样子。其样式名在js中引用 style在行内样式上获取到样式，在外部和内部获取不到样式 通过window.getComputeStyle(元素名，null）.获取的样式属性 可以获取行内 内部 外部的所以样式 但是获得color是rgb样式 获取的background是所有属性
有一个按钮点击一下出现一个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>
offse获取样式
.offsetParent 自己相对与父元素偏移 获取父元素\
如果子元素的父元素是已经定位的元素，那么它的offsetParent就是已经定位的父元素，如果没有定位，那么就是body
其他属性例如：
<style>
.div1{
width: 200px;
height: 200px;
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
/* position: fixed;
left:20px;
top:10px; */
}
</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); // offsetWidth =content 宽度 + 左右的padding + 左右的border
</script>
<script>
let divdom = document.querySelector('div')
console.log(divdom.clientWidth); // clientWidth = content 宽度 + 左右的padding
console.log(divdom.clientLeft);//offsetLeft（13） = argin-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） */
// console.log(divDom.offsetTop);
获取滚动条距离 onscroll
console.log( document.documentElement.scrollTop );
实时获取滚动条距离（ 滚动条 滚动事件）：
<script>
document.onscroll =function(){
console.log(document.documentElement.scrollTop);
}
</script>
