javascript与dom

<div class="scroll" id="scroll">
<div class="demo1" id="demo1">
<ul>
<li><img src="sun11.16/aa.jpg"/></li>
<li><img src="sun11.16/ss.jpg"/></li>
<li><img src="sun11.16/ff.jpg"/></li>
<li><img src="sun11.16/ghg.jpg"/></li>
<li><img src="sun11.16/xbx.jpg"/></li>
<li><img src="sun11.16/xgng.jpg"/></li>
<li><img src="sun11.16/xgfn.jpg"/></li>
<li><img src="sun11.16/fnfn.jpg"/></li>
</ul>
</div>
<div class="demo2" id="demo2"></div>
</div>类似上面的html  用途是 做图片滚动问题：通过dom来取得图片宽度，结合margin padding 计算出Demo，demo2的宽度
   
      var x=document.getElementsByTagName("li");。
      
      下面怎么取得<li>下 <img>宽度，又怎么赋值给demo1（div）
 
     写不下去了，求教给出代码 或者 给出一些文章 都行。。最好 有关于dom 标签的属性  手册快下班了，，，明天结贴。望有识之士教育
                                                      

解决方案 »

  1.   

    通过图片路径获取图片宽度,高度等信息
    <html>
    <head>
    <SCRIPT type=text/javascript>
    function test()
    {
    var va=document.getElementById("bb").value;
    var myimg=document.getElementById("im");
    var myimg=new Image();myimg.src=va;
    alert(myimg.height);
    alert(myimg.width)
    } 
    </script>
    </head>
    <body>
    <input type="file" name="aa" id="bb" onchange="test()"></body>
    <html>
      

  2.   


    <html>
    <head>
    <SCRIPT type=text/javascript>
    function test()
    {
    var va=document.getElementById("bb").value;
    var myimg=document.getElementById("im");
    var myimg=new Image();myimg.src=va;
    alert(myimg.height);
    alert(myimg.width)
    } 
    </script>
    </head>
    <body>
    <input type="file" name="aa" id="bb" onchange="test()"></body>
    <html>
      

  3.   

    要取得li下img的宽度，大致可以这么做：
    var demo = document.getElementById('demo'),
        demoWidth = parseInt(demo.style.paddingLeft) + parseInt(demo.style.paddingRight),
        lis = document.getElementsByTagName('li');
    for(var i = 0, count = lis.length; i < count; i++)
    {
      var width = demoWidth + lis[i].childNodes[0].clientWidth;
      demo.style.width = demoWidth;
    }
      

  4.   

    要取得li下img的宽度，大致可以这么做： 
    var demo = document.getElementById('demo'),
        demoWidth = parseInt(demo.style.paddingLeft) + parseInt(demo.style.paddingRight),
        lis = document.getElementsByTagName('li');
    for(var i = 0, count = lis.length; i < count; i++)
    {
      var width = demoWidth + lis[i].childNodes[0].clientWidth;
      demo.style.width = width;
    }
      

  5.   


    <!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=gb2312" />
    <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js" type="text/javascript"></script>
    <title>无标题文档</title>
    <script type="text/javascript">
    window.addEvent('domready', function() {
        var imgarr=$('demo1').getElements('img');
        for(var i=0;i<imgarr.length;i++){
              var size=imgarr[i].getSize();
              alert("The element is "+size.x+" pixels wide and "+size.y+"pixels high.");    }
    });
    </script>
    </head><body>
    <div class="scroll" id="scroll">
    <div class="demo1" id="demo1">
    <ul>
    <li> <img src="sun11.16/aa.jpg"/> </li>
    <li> <img src="sun11.16/ss.jpg"/> </li>
    <li> <img src="sun11.16/ff.jpg"/> </li>
    <li> <img src="sun11.16/ghg.jpg"/> </li>
    <li> <img src="sun11.16/xbx.jpg"/> </li>
    <li> <img src="sun11.16/xgng.jpg"/> </li>
    <li> <img src="sun11.16/xgfn.jpg"/> </li>
    <li> <img src="sun11.16/fnfn.jpg"/> </li>
    </ul>
    </div>
    <div class="demo2" id="demo2"> </div>
    </div>
    </body>
    </html>
      

  6.   

    http://www.w3school.com.cn/xmldom/dom_nodes_nodelist.asp