JavaScript案例及总结
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>changeDIV</title>
<style style="text/css">
#box{height: 100px;width: 100px;background-color: red;margin:20px 90px;}
</style>
</head>
<body>
<script style="text/javascript">
var box
window.onload=function(){
box=document.getElementById("box")
}
function heighten(){
box.style.height="400px"//变高
}
function widen(){
box.style.width="400px"//变高
}
function discolor(){
box.style.backgroundColor="pink"//变色
}
function reset(){
box.style.height="100px"
box.style.width="100px"
box.style.backgroundColor="red"
}
function hide(){
box.style.display="none"//显示
}
function show(){
box.style.display="block"//隐藏
}
</script>
<div id="box"></div>
<input type="button" value="变宽" onclick="heighten()">
<input type="button" value="变高" onclick="widen()">
<input type="button" value="变色" onclick="discolor()">
<input type="button" value="重置" onclick="reset()">
<input type="button" value="隐藏" onclick="hide()">
<input type="button" value="显示" onclick="show()">
总结:
选择器的使用
全局变量的定义:window.load()
HTML DOM 改变css样式:语法document.getElementById().style.属性="属性值"
属性带 - 的 使用驼峰写法
display属性的使用
onclick事件
问题:
document.getElementById() 括号内部 老师讲课的时候有时单引号,又时双引号,但并不影响结果,
我想问的是 是不是可以随便用,还有给数组元素赋值的时候也是这样
</body>
</html>