重复生成元素该怎么写？

<style>
    #resize1 {
        position : absolute;
        border: 0px solid black;
        height: 10px;
        width: 50px;
        overflow: hidden;
        background-color: #ffffff;
        top : 250px; 
        left: 100px;       
    }
   #resize2 {
        position : absolute;
        border: 0px solid black;
        height: 100px;
        width: 50px;
        overflow: hidden;
        background-color: #85f285;
        top : 350px; 
        left: 200px;       
    }
    #resize3 {
        position : absolute;
        border: 0px solid black;
        height: 100px;
        width: 50px;
        overflow: hidden;
        background-color: #85f285;
        top : 350px; 
        left: 300px;       
    }
</style><div id="resize1">
</div>
<div id="resize2">
</div>
<div id="resize3">
</div>
这里的resize元素的个数是个变量，跟据文件里读进来的决定。也就是需要用循环来写，相应地div也得循环来写，谁能帮我写个例子啊，谢谢啦。

解决方案 »

  1.   

    用父元素控制如下
    .tbcss{border:solid 1px #f0f; margin:0px;padding:0px;}
    .tbcss tr td{margin:5px; padding:5px; border:solid 1px #0f0;}你的resize元素就相当于td,
    <table class="tbcss"><tr><td></td></tr></table>
      

  2.   

    在读取css的时候定义1个数组来存放读取进来的className然后循环数组生成div，id为数组里存放的className
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style> </style>
    </head><body>
    </body>
    <script>
    // 插入样式
    function insertCSS(sheet, selector, declare, index){
    if(sheet.insertRule){
    var insert = selector + '{' + declare + '}';
    sheet.insertRule(insert, index);
    }else if(sheet.addRule){
    sheet.addRule(selector, declare, index);
    }
    } // 制造假数据
    var styles = [
    {selector: '.resize1', declare: 'width:100px;height:100px;border:1px solid red'},
    {selector: '.resize2', declare: 'border:1px solid blue'},
    {selector: '.resize3', declare: 'border:1px solid yellow'}
    ]; (function(){
    // 第一段样式表
    var x = document.styleSheets[0], fragment = document.createDocumentFragment();
    for(var i = 0; i < styles.length; i++){
    // 插入样式到样式表
    var style = styles[i];
    insertCSS(x, style.selector, style.declare, i);
    // 生成DIV 并对应样式
    var odiv = document.createElement('div');
    odiv.innerHTML = "test";
    odiv.className = style.selector.replace('.','');
    fragment.appendChild(odiv);
    } document.body.appendChild(fragment);

    })();</script>
    </html>
      

  4.   

    下面有个var resize1 = new YAHOO.util.Resize('resize1', {
            proxy: true,
            hiddenHandles:true,         
    handles: ['t']
        });是要跟上面定义的resize1关联的，实现resize,可是现在没有能拖动的效果了，该怎么解决啊
      

  5.   

    其实我想说既然是根据读进来的文件来写的页面js处理起来效率不高，不如改成php直接读取文件绘制页面比较好