本程序演示的是一個簡單的怎麼把代碼寫的更好少點,提高代碼的利用。
比如想給三個div不一樣的顏色,我們該怎麼寫?(本程序雖然很簡單,但是程序思想很好)
效果如下:
第一種寫法:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="demo"></div>
<div id="test"></div>
<div id="another"></div>
<script>
var demo = document.getElementById("demo");
var test = document.getElementById("test");
var another = document.getElementById("another");
</script>
</body>
</html>
第二種寫法:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="demo"></div>
<div id="test"></div>
<div id="another"></div>
<script>
function $(id){
return document.getElementById(id);
}
$("demo").style.backgroundColor = 'purple';
$("test").style.backgroundColor = "blue";
</script>
</body>
</html>