體會面向物件和面向程序的編程思想
ChangeStyle是自定義的建構式,再通過原型添加方法的函式,
實體化物件,匯入json引數,和創建cs,呼叫原型添加的方法函式
過渡,先熟悉記憶
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 300px; height: 200px; background-color: red; } </style> </head> <body> <input type="button" value="顯示效果" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> function ChangeStyle(btnObj, dvObj, json) { this.btnObj = btnObj; this.dvObj = dvObj; this.json = json; } ChangeStyle.prototype.init = function () { //點擊按鈕,改變div多個樣式屬性值 var that = this; this.btnObj.onclick = function () { for (var key in that.json) { that.dvObj.style[key] = that.json[key]; } }; }; //實體化物件 var json = { "width": "500px", "height": "300px", "backgroundColor": "blue" } var cs = new ChangeStyle(my$("btn"), my$("dv"), json); cs.init();//呼叫方法 </script> </body> </html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/159530.html
標籤:JavaScript
