JavaScript控制div样式
课程中案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript控制div样式</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #bb60d5;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="变高" onclick="aa()">
<input type="button" value="变宽" onclick="bb()">
<input type="button" value="变色" onclick="cc()">
<input type="button" value="重置" onclick="dd()">
<input type="button" value="隐藏" onclick="ee()">
<input type="button" value="显示" onclick="ff()">
<script>
var box ;
window.onload = function (){
box = document.getElementById('box');
}
function aa() {
box.style.height = "300px";
}
function bb() {
box.style.width = "300px";
}
function cc() {
box.style.backgroundColor = "red";
}
function dd() {
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "#bb60d5";
box.style.display = 'block';
}
function ee() {
box.style.display = 'none';
}
function ff() {
box.style.display = 'block';
}
</script>
</body>
</html>运行截图：
总结：
document.getElementById()返回的是页面元素。
document.getElementsByClassName()返回的是页面元素的数组，访问其内容需要下标。
实际操作中遇到的一个小问题，搞了半天终于搞懂。