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>
