zoukankan      html  css  js  c++  java
  • js原生设计模式——8单例模式之简约版属性样式方法库

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单例模式——在js中就是指的单个对象,可用于命名空间声明</title>

    </head>
    <body>
        <div id="box"></div>
    </body>
    <script type="text/javascript">
    /***
    *此示例就是典型的js单例模式,是简约版属性样式方法库
    */
    var A = {
        //获取元素,并返回
        getid:function(id){
            return document.getElementById(id);
        },
        //设置元素css属性
        css:function(id,key,value){
            document.getElementById(id).style[key] = value;
        },
        //设置元素属性
        attr:function(id,key,value){
            document.getElementById(id)[key] = value;
        },
        //设置元素显示内容
        html:function(id,html){
            document.getElementById(id).innerHTML = html;
        },
        //为元素绑定事件处理程序
        on:function(id,type,fn){
            document.getElementById(id)['on'+type] = fn;

        }
    };

    //测试用例:通过这个代码库我们再操作元素样式属性就方便多了
    A.css('box','background','olive');
    A.css('box','width','400px');
    A.css('box','height','400px');
    A.css('box','border','2px solid blue');
    // A.attr('box','className','boxstyle');
    A.html('box','这里添加要显示的内容文本');
    A.on('box','click',function(){
        A.css('box','width','500px');
        A.css('box','background','green');
    });

    //本例已经通过验证
    </script>
    </html>

  • 相关阅读:
    继承
    类和对象
    Scanner类
    面向对象思想
    final关键字
    The difference between text mode and binary mode with file streams
    Linux下常见权限操作相关命令
    Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext
    手动运行jar包,指定配置文件
    jdk 1.8.0_131 Class JavaLaunchHelper is implemented
  • 原文地址:https://www.cnblogs.com/koleyang/p/4939985.html
Copyright © 2011-2022 走看看