1. 变量
使用变量以后，代码变得格外的简洁：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
function toGreen() {
var odiv = document.getElementById('div1');
odiv.style.width = '300px';
odiv.style.height = '300px';
odiv.style.background = 'green';
}
function toRed() {
var odiv = document.getElementById('div1');
odiv.style.width = '200px';
odiv.style.height = '200px';
odiv.style.background = 'RED';
}
</script>
</head>
<body>
<div id="div1"
ONMOUSEOVER="toGreen()"
ONMOUSEOUT="toRed()">
</div>
</body>
</html>
2. 网页换肤
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网页换肤
</title>
<link id = "l1" rel = "stylesheet" type = "text/css" href="皮肤2.css"/>
<script>
function skin1(){
var oL = document.getElementById('l1');
oL.href = "皮肤1.css"
}
function skin2(){
var oL = document.getElementById('l1');
oL.href = "皮肤2.css"
}
</script>
</head>
<body>
<input type = "button" value="皮肤1" onclick="skin1()">
<input type = "button" value="皮肤2" onclick="skin2()">
</body>
</html>
可以看出：
1. 任何标签都可以加ID.
2. 任何标签的任何属性，也都可以修改.
3. 只要HTML能写，我们利用JS就可以改。HTML里怎么写，JS里就怎么写。
3. if 判断的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 200px;
background: #CCC;
display: none;
}
</style>
</head>
<body>
<input type = "button" value="显示隐藏" onclick="showHide()">
<div id = "div1"></div>
<script>
function showHide(){
var oDiv = document.getElementById('div1');
if (oDiv.style.display=='block'){
oDiv.style.display='none';
}else{
oDiv.style.display='block';
}
}
</script>
</body>
</html>
4. 链接添加JS
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>a链接添加js
</title>
</head>
<body>
<a href="javascript:;">链接
</a>
</body>
</html>
一般javasrcipt后面都空着，如果href="#"的话会发生跳转
5. ClassName的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ClassName
</title>
<style>
#div1{
width: 100px;
height: 100px;
border: 1px solid black;
}
.box {
background-color: red;
}
</style>
<script>
function toRed(){
var oDiv = document.getElementById('div1');
oDiv.className = 'box';
}
</script>
</head>
<body>
<input type = "button" value="变红" onclick="toRed()">
<div id="div1">
</div>
</body>
</html>
.意味着后面的box是class的id，动态设置标签的class的时候，不能用.class，只能用.className。
转载请注明原文地址: https://ju.6miu.com/read-1862.html
