1. document对象改变Html元素样式属性
行内样式操作案例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 200px;
width: 200px;
background-color: darkgoldenrod;
}
</style>
</head>
<body>
//当点击div这个盒子就换个背景颜色宽度也变宽
<div></div>
<script>
var obj = document.querySelector('div'); //获取元素对象
//注册事件 事件处理函数
obj.onclick = function() {
this.style.backgroundColor = 'purple'; //修改Html元素样式属性
this.style.width='300px';
}
</script>
</body>
</html>
类名样式操作如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 200px;
width: 200px;
background-color: darkgoldenrod;
}
.change {
background-color: purple;
margin-top: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
//只有少许样式修改的时候就用js的行内样式操作修改
//欧大量的样式修改就用js的类名样式操作修改
var div = document.querySelector('div');
div.onclick = function() {
this.className = 'change';
}
</script>
</body>
</html>