首页 > 程序开发 > web前端 > HTML/CSS >

一个简单的函数封装(JavaScript+html)

2017-08-11

一个简单的函数封装(JavaScript+html)。本程序演示的是一个简单的怎么把代码写的更好少点,提高代码的利用。比如想给三个div不一样的颜色,我们该怎么写?(本程序虽然很简单,但是程序思想很好)。效果如下:

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

比如想给三个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 = &#39;purple&#39;;  
    $("test").style.backgroundColor = "blue";  
  
</script>  
</body>  
</html>  
相关文章
最新文章
热点推荐