1.事件：
<div>
我是div
</div>
<script>
let div = document.querySelector('div');
/* div是一个dom对象
.onclick相当于给对象添加了一个属性
属性值是一个函数，点击就会触发 */
/* div.onclick = function (){
alert('你好')
} */
/* 鼠标移上的时候 */
div.onmouseover = function(){
div.style.background = '#ccc'
}
/* 鼠标移开 */
div.onmouseout = function(){
div.style.background = 'none'
}
/* 鼠标按钮被按下 */
div.onmousedown = function(){
alert('鼠标按下时反应')
}
/* 鼠标抬起时反应 */
div.onmouseup = function(){
alert('鼠标抬起时反应')
}
</script>
2.添加className：
<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>
.bg{
width: 200px;
height: 200px;
background-color: beige;
}
</style>
</head>
<body>
<div>
我是div1
</div>
<script>
let div = document.querySelector('div');
/* 添加className */
div.className = 'bg';
div.onclick = function(){
div.className = ''
}
</script>
3.获取元素样式：
<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>
</head>
<body>
<div style="width: 200px;height: 50px;background-color: rebeccapurple;">我是div</div>
<script>
let div = document.querySelector('div');
/* 在行内样式上获取样式 */
console.log(div.style.height);
/* style是获取不到在行内样式上或者外部样式上的样式的 */
console.log(div.style.color.fontSize);
/* window.getComputedStyle可以获取行内，内部，外部所以样式
但是获得color是rgb格式的，获取的是background所有格式 */
console.log((window.getComputedStyle(div,null).fontSize));
console.log((window.getComputedStyle(div,null).color));
console.log((window.getComputedStyle(div,null).height));
</script>
获取元素样式练习：
<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>
.bg{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.bg2{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<!-- 一个按钮点击一下出现一个div，里面写着我是div，
.bg 是内部样式 有宽200px 高200px 和 1px #CCC 灰色边框
使用JS给div添加上classname bg
classname.bg2 红色背景 白字
鼠标移入div显示.bg2
，鼠标移出div显示原来的样子，点击div可以获取
div的背景色 和 color 颜色-->
<button onclick="fn()">点我</button>
<script>
let btn = document.querySelector('button')
function fn(){
let div = document.createElement('div');
let divtext = document.createTextNode('我是div')
let body = document.querySelector('body')
div.appendChild(divtext);
body.appendChild(div)
div.className = 'bg';
div.onmouseover = function(){
div.className = 'bg bg2'
}
div.onmouseout = function(){
div.className = 'bg'
}
div.onmousedown = function(){
let b = window.getComputedStyle(div,null).background
alert(b)
}
}
</script>
4.属性：
<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: 200px;
padding: 10px;
margin: 5px;
border: 3px solid #ccc;
position: absolute;
left: 20px;
top: 10px;
}
.c{
width: 100px;
height: 100px;
background-color: slateblue;
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div class="div1">
<div class="c">
<button onclick="getScroll()">获得滚动条顶部的距离</button>
</div>
</div>
<script>
let divDom = document.querySelector('div')
console.log(window.getComputedStyle(divDom,null).width);
/*offsetWidth = content 宽度+左右padding+左右border */
console.log(divDom.offsetWidth);
/* clientWidth = content 宽度+左右padding 不加border */
console.log(divDom.clientWidth);
/* 正常文档流下 offsetLeft = body的margin-left+divDom的margin-left */
/* 脱离文档流的情况下 offsetLeft(25) = divDom的left(20)+divDom的margin-left */
/* 正常文档流下offsetTop 就是offsetTop(8) = body 的 margin-top(8) */
console.log(divDom.offsetLeft);
console.log(divDom.offsetTop);
/*offsetParent 自己相对于(父元素)偏移 */
console.log(divDom.offsetParent );
let c = document.getElementsByClassName('c')[0];
/* c是绝对定位 是相对于divDom偏移的 所以他的偏移父元素是divDom */
console.log(c.offsetParent);
/* offsetParent 如果子元素的父元素已经是定位的元素，那么他的offsetParent
就是已经定位(relative,absolute,fixed)的父元素，如果不是就是body */
function getScroll(){
/* 获取滚动条距离顶部的高度 */
console.log(document.documentElement.scrollTop);
}
/* 滚动条滚动事件 */
document.onscroll = function(){
console.log(document.documentElement.scrollTop);
}
</script>
</body>
