js: ак узнать положение левого края объекта

Discussion in 'PHP' started by Naydav, 5 Mar 2008.

  1. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    PHP:
    <div id="newobj"></div>

    <
    script>
    var 
    newobj GetElementById("newobj");
    </script>
    Как узнать положение левого края объекта "newobj"
    (от левого края экрана, типа Left )

    в стилях "newobj" изначально ничего не указано...
     
  2. spider-intruder

    spider-intruder Elder - Старейшина

    Joined:
    9 Dec 2005
    Messages:
    700
    Likes Received:
    339
    Reputations:
    37
    Тип обьекта какой? Кнопка?
     
    1 person likes this.
  3. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    PHP:
    <div id="newobj"></div>
     
  4. spider-intruder

    spider-intruder Elder - Старейшина

    Joined:
    9 Dec 2005
    Messages:
    700
    Likes Received:
    339
    Reputations:
    37
    b=getElementById("Buttonchik");
    alert(b.style.top);
    alert(b.style.left);

    дело в том что если свойство position не absolute то top и left считаются от контейнера в который вложен обьект.
     
  5. spider-intruder

    spider-intruder Elder - Старейшина

    Joined:
    9 Dec 2005
    Messages:
    700
    Likes Received:
    339
    Reputations:
    37
    http://www.quirksmode.org/js/findpos.html
     
  6. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    PHP:
    <script>
    var 
    newobj   document.getElementById("newobj");
    document.write(newobj.left);
    </script>  

    <div id="newobj"></div>
    alert(newobj.style.top); - вообще ничего не выведет, так в style ничего не указано, я же писал
     
  7. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    все разобрался

    document.write(newobjs.offsetLeft);
     
  8. Helios

    Helios Elder - Старейшина

    Joined:
    14 Jan 2007
    Messages:
    414
    Likes Received:
    180
    Reputations:
    103
    Для таких случаев, когда не знаешь, какие поля объекта определены:

    Code:
    var obj = document.getElementById('myobj');
    
    for(i in obj)
    {
        docunent.write('obj.' + i + ' = ' + obj[i] + '<br />');
    }
    
    Сей нехитрый скриптец выведет всю инфу о конкретном элементе
     
    1 person likes this.
  9. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    PHP:
    function getBounds(element)
    {
      var 
    left element.offsetLeft;
      var 
    top element.offsetTop;
      for (var 
    parent element.offsetParentparentparent parent.offsetParent)
      {
        
    left += parent.offsetLeft parent.scrollLeft;
        
    top += parent.offsetTop parent.scrollTop
      
    }
      return {
    leftlefttoptopwidthelement.offsetWidthheightelement.offsetHeight};
    }

     
    left_ getBounds(block1);
     
     
    document.write(left_.left);

    В ИЕ вадает -1...

    так же как и
    PHP:
    block1.offsetLeft
    и что нужно ие?

    не работает когда див находиться в таблице в ячейке

    пс getBoundingClientRect - тоже не работает
     
    #9 Naydav, 5 Mar 2008
    Last edited: 5 Mar 2008
  10. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    Полный листинг - в ИЕ не работает :(
    PHP:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <
    tr>
        <
    td>
         
    <
    div id="block2" style="position: absolute; left:0px; top:0px;">block2</div>
    <
    div id="block1" style="margin-left: 230px;">


    <
    script>
    var 
    block1 document.getElementById("block1");
    var 
    block2 document.getElementById("block2");

    function 
    getBounds(element)
    {
      var 
    left element.offsetLeft;
      var 
    top element.offsetTop;
      for (var 
    parent element.offsetParentparentparent parent.offsetParent)
      {
        
    left += parent.offsetLeft parent.scrollLeft;
        
    top += parent.offsetTop parent.scrollTop
      
    }
      return {
    leftlefttoptopwidthelement.offsetWidthheightelement.offsetHeight};
    }

    var 
    bounds getBounds(block1);
    alert('Coord: ' +
          
    '(' bounds.left ',' bounds.top ') x ' +
          
    '(' bounds.width ',' bounds.height ')');


    //block2.style.left = '500';
    //block2.style.left = block1.offsetLeft+'px';
    //block2.style.top = block1.offsetTop+'px';
    block2.style.left bounds.left;
    block2.style.top =  bounds.top;
    </script>
        
         
         </td>
      </tr>
    </table>

     
  11. Helios

    Helios Elder - Старейшина

    Joined:
    14 Jan 2007
    Messages:
    414
    Likes Received:
    180
    Reputations:
    103