一个简单的函数封装（JavaScript+html）

17-08-11 来源：[db:作者]

收藏我要投稿

本程序演示的是一个简单的怎么把代码写的更好少点，提高代码的利用。

比如想给三个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>

点击复制链接与好友分享!回本站首页