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 );
    }
  • 相关阅读:
    Linux基础-yum软件包管理
    Linux基础-rpm软件包管理
    Linux基础-简单的进程操作
    Linux基础-free窥内存-dd探硬盘
    Linux基础-swap交换分区
    Linux基础-软硬连接Block概念
    Linux基础操作-分区概念
    Linux基础-vim编辑器
    Linux基础操作命令-打包压缩
    RandomAccessFile 文件读写中文乱码解决方案!
  • 原文地址:https://www.cnblogs.com/landofpromise/p/5751553.html
Copyright © 2011-2022 走看看