您的位置：首页 > Web前端 > JavaScript

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

2017-08-09 21:06 477 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航