zoukankan      html  css  js  c++  java
  • 封装一个DivTag

    封装一个DivTag,在页面加载的时候自动执行。用于创建任意的DOM节点,并且可以追加到任意的DOM节点上,可以设置样式,添加文本。
    var element = {
    __init__: function ( tagName ) {
    //创建DOM标签
    this.DOM = document.createElement( tagName );
    },
    //追加到dom节点上
    appendTo: function ( node ) {
    //如果是节点
    if ( node.nodeType ) {
    node.appendChild( this.DOM );
    } else if ( node.DOM ) {
    //如果是DivTag
    node.DOM.appendChild( this.DOM );
    }
    return this;
    },
    //设置文本
    html: function ( str ) {
    this.DOM.innerHTML = str;
    return this;
    },
    //设置样式
    css: function ( option ) {
    for ( var k in option ) {
    this.DOM.style[ k ] = option[ k ];
    }
    return this;
    },
    //添加节点
    add: function ( node ) {
    if ( node.nodeType ) {
    this.DOM.appendChild( node );
    } else if ( node.DOM ) {
    this.DOM.appendChild( node.DOM );
    }
    return this;
    }
    };


    //创建一个div标签
    function DivTag() {
    this.__init__( 'div' );
    }
    //修改DivTag原型,给原型重新赋值,使原型具有该方法
    DivTag.prototype = element;
    //创建一个p标签
    function PTag() {
    this.DOM = document.createElement( 'p' );
    }
    //使p节点同样可以继承该方法
    PTag.prototype = element;

    onload = function() {
    new DivTag()
    .html( '你好啊' )
    .add( new PTag().html( '我是 p 标签' ) )
    .css( {
    border: '1px dashed red'
    } )
    .appendTo( document.body );
    }
  • 相关阅读:
    积木游戏
    斐波那契公倍数
    莫比乌斯反演,狄利克雷卷积,杜教筛
    CF932E Team Work
    【算法学习/数据结构】李超树
    【算法笔记/数学内容】博弈论-从入土到入土
    瞎几把写的cspj题解
    【算法笔记】数位dp
    【算法笔记】树形dp
    攻防世界-WEB相关writeup-3
  • 原文地址:https://www.cnblogs.com/landofpromise/p/5751553.html
Copyright © 2011-2022 走看看