您现在的位置：首页 >> 前端 >> 内容

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

时间：2017/8/11 9:46:00 点击：

　　核心提示：本程序演示的是一个简单的怎么把代码写的更好少点，提高代码的利用。比如想给三个p不一样的颜色，我们该怎么写?(本程序虽然很简单，但是程序思想很好)效果如下：第一种写法：!DOCTYPE htmlhtm...

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

比如想给三个p不一样的颜色，我们该怎么写?(本程序虽然很简单，但是程序思想很好)

效果如下：

第一种写法：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        p{  
            width: 100px;  
            height: 100px;  
            background-color: pink;  
        }  
    </style>  
</head>  
<body>  
<p id="demo"></p>  
<p id="test"></p>  
<p id="another"></p>  
<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>  
        p{  
            width: 100px;  
            height: 100px;  
            background-color: pink;  
        }  
    </style>  
</head>  
<body>  
<p id="demo"></p>  
<p id="test"></p>  
<p id="another"></p>  
<script>  
      
    function $(id){  
     return document.getElementById(id);  
    }  
    $("demo").style.backgroundColor = 'purple';  
    $("test").style.backgroundColor = "blue";  
  
</script>  
</body>  
</html>