欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS高级---体会面向对象和面向过程的编程思想

程序员文章站 2022-05-29 08:14:52
体会面向对象和面向过程的编程思想 ChangeStyle是自定义的构造函数，再通过原型添加方法的函数。 实例化对象，导入json参数，和创建cs，调用原型添加的方法函数 过渡，先熟悉记忆

体会面向对象和面向过程的编程思想

 

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>

上一篇： 让你的逼格瞬间提升的十个Python语法！

下一篇： 自写一个漂亮的ant design form提交标签

推荐阅读