一個簡單的函式封裝(JavaScript+html)
阿新 • • 發佈:2019-02-06
本程式演示的是一個簡單的怎麼把程式碼寫的更好少點,提高程式碼的利用。
比如想給三個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>