<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
}
.change {
background-color: blue;
width: 300px;
height: 300px;
margin: 100px auto;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//element.sytle.要修改的属性名 = '';的格式
//注意要修改的属性名 使用的是驼峰命名法 如backgroundColor;
var div = document.querySelector('div');
// div.onclick = function (){
// div.style.backgroundColor = 'black';
// div.style.width = '400px';
// }
//element.className 适合于需要修改的样式较多时
//可以在sytle里写好我们要改变的格式 然后用element.className='change'的写法把写好的样式赋给div
//1.change会直接吧原有的style样式覆盖掉
//2.如果想保留原先的样式可以用多 类名选择器 去赋值如div.className = 'box change';
div.onclick = function (){
div.className = 'change';
}
</script>
</body>
</html>
当我们点击图片后从红色变成黑色并且宽度改为了400px 是因为点击后script里面的改变相当于添加了行内样式 所以优先级高于在style标签里的样式