JavaScript获取元素样式
<!DOCTYPE html>
<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>
</head>
<style>
div{
font-size: 50px;
color: coral;
}
</style>
<body>
<div style="background: chartreuse;height: 150px;width: 150px;">
我是Div
</div>
<script>
let div=document.querySelector('div');
/* 通过style在行内样式获取样式 */
/* console.log(div.style.height); */
/* style获取不到内部样式和外部样式 */
/*window.getComputedStyle方法都可以获取内部,外部，行内样式 */
/* 获取的颜色是rgb样式 */
console.log(window.getComputedStyle(div,null).color);
console.log(window.getComputedStyle(div,null).fontSize);
console.log(window.getComputedStyle(div,null).background);
</script>
</body>
</html>
事件
<body>
<div>我是div</div>
<script>
let div =document.querySelector('div')
/* div是一个dom对象 */
/* .onclick相当于给对象添加一个属性，属性值是一个函数，一点击就会触发 */
/* div.onclick=function(){
alert('你好')
} */
/* onmouseover 鼠标移到某元素之上 */
/* div.onmouseover=function(){
div.style.color='red'
} */
/* onmouseout 鼠标从某元素移开 */
/* div.onmouseout=function(){
div.style.color=''
} */
/* onmousedown 鼠标被按下 */
/* div.onmousedown=function(){
alert('121233')
} */
/* onmouseup 鼠标被抬起 */
/* div.onmouseup=function(){
alert('qweqew')
} */
</script>
</body>
