zoukankan      html  css  js  c++  java
  • js动态生成层方法 不懂得加QQ 2270312758

    我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性。比方说我们想要建立一个 div 层,则可以使用以下代码实现。
    一.直接建立

     1 function Button1_onclick() //直接采用代码建立一个DIV
     2 {
     3     var newElement = document.createElement('div'); 
     4     var newText = document.createTextNode('这是新建立 div 中的文字。'); 
     5     document.body.appendChild(newElement); //漏了这一句,否则行不通 
     6     newElement.id = 'newDiv'; 
     7     newElement.className = 'newDivClass'; 
     8     newElement.setAttribute('name ','newDivName'); 
     9     newElement.style.width = '300px'; 
    10     newElement.style.height = '200px'; 
    11     newElement.style.margin = '0 auto'; 
    12     newElement.style.border = '1px solid #DDD'; 
    13     newElement.appendChild(newText);  
    14 }

    二.把建立新对象写成一个通用方法,增加其通用性

    createEl = function(t, a, y, x)//编写建立一个新对象的通用方法
    { 
        var e = document.createElement(t); 
        document.body.appendChild(e); //漏了这一句,否则行不通 
        if (a) { 
            for (var k in a) { 
                if (k == 'class') e.className = a[k]; 
                else if (k == 'id') e.id = a[k]; 
        else e.setAttribute(k, a[k]); 
        } 
        } 
        if (y) { for (var k in y) e.style[k] = y[k]; } 
        if (x) { e.appendChild(document.createTextNode(x)); } 
        return e; 
    }  
    
    //再通过以下方法来进行调用建立一个新层
    function Button2_onclick() //先把建立一个新的DIV的方法写成一个通用方法,然后通过调用方法实例化建立DIV
    {
        var newElement = createEl('div', 
        {'class': 'newDivClass', id: 'newDiv', name: 'newDivName'},
        { '300px', height:'200px', margin:'0 auto', border:'1px solid #DDD'}, 
        '这是新建立div 中的文字。');
    
    }
    努力在努力 QQ:2456314589 希望 对你们有所帮助
  • 相关阅读:
    BKDRHash函数
    poj3261Milk Patterns 后缀数组
    两圆相交面积
    后缀数组模板
    kmp模板 && 扩展kmp模板
    hdu 2594 Simpsons’ Hidden Talents
    BZOJ 1911 特别行动队(斜率优化DP)
    BZOJ 1898 沼泽鳄鱼(矩阵快速幂)
    BZOJ 1996 合唱队(DP)
    BZOJ 1821 部落划分(二分+并查集)
  • 原文地址:https://www.cnblogs.com/-jth/p/9761065.html
Copyright © 2011-2022 走看看