На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Поиск Участники Календарь Избранное RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> Получить координаты элемента , JavaScript
Rom@nych
Сообщ. #1 ,

    Profi
    *****
    Профиль · PM
    Поощрения: 2 Dgm
    Рейтинг (т): 75
    Собосно сабж. Надо получить координаты левого верхнего угла любого HTML-элемента.
    Вот написал ф-цию:
    ExpandedWrap disabled
      function calcleft(x_ele){
              var x_ret=0;
              var oParent = x_ele.offsetParent;
              if (oParent == null) return 0
              else x_ret=x_ele.offsetLeft + oParent.clientLeft + calcleft(oParent);
              return x_ret
          }
       
          function calctop(x_ele){
              var x_ret=0;
              var oParent = x_ele.offsetParent;
              if (oParent == null) return 0
              else x_ret=x_ele.offsetTop + oParent.clientTop + calctop(oParent);
              return x_ret
          }


    Не работает когда есть тэг <script> в коде таблицы, в которой надо узнать координаты элемента:( Почему так - не знаю. Если кто-то сталкивался с таким, то может приведёте свои варианты решения этой задачи:)
    Mixxx
    Сообщ. #2 ,

      Profi
      *****
      Профиль · PM
      Поощрения: 13 Dgm
      Рейтинг (т): 107
      Попробуй вот эти функции:
      ExpandedWrap disabled
         
            function getLeft(o)//Левый край
            {
               var res=o.offsetLeft;
               while(o=o.offsetParent)res+=o.offsetLeft;
               return res;
            }
         
            function getTop(o)//верхний край
            {
               var res=o.offsetTop;
               while(o=o.offsetParent)res+=o.offsetTop;
               return res;
            }
         
            function getBottom(o)//нижний край
            {
               return o.offsetHeight+getTop(o);
            }
         
            function getRight(o)//правый край
            {
               return o.offsetWidth+getLeft(o);
            }
      seelts
         Сообщ. #3 ,

        Full Member
        ***
        Профиль · PM
        Рейтинг (т): 18
        Может так?
        ExpandedWrap disabled
           
          function calcleft(x_ele)
          {
          var x_ret=0;
          x_ret=x_ele.style.left+document.body.scrollLeft;
          return x_ret;
          }
          function calctop(x_ele)
          {
          var y_ret=0;
          y_ret=x_ele.style.top+document.body.scrollTop;
          return y_ret;
          }


        Поясните пож. чё за offset* :(
        Сообщение отредактировано: seelts -
        Mixxx
        Сообщ. #4 ,

          Profi
          *****
          Профиль · PM
          Поощрения: 13 Dgm
          Рейтинг (т): 107
          seelts
          offsetTop, offsetLeft, offsetWidth, offsetHeight (доступны только для чтения) -
          это реальные параметры которые получились на самом деле в отличии от
          style.top style.left style.width и style.height - которые годятся только для записи, прочитать ты конечно тоже можешь, но это будет лишь та инфа которую ты сам описал в аттрибуте -- style.
          Например:
          ExpandedWrap disabled
             
            <div style="width:70px" onclick=alert(this.style.width);alert(this.offsetWidth)>sssssssssssssssss</div>
          seelts
             Сообщ. #5 ,

            Full Member
            ***
            Профиль · PM
            Рейтинг (т): 18
            2Mixxx
            сделал как ты сказал... первый раз он (ИЕ) крякнул "70px" второй раз "102" так вот 102 - это ширина дива вместе с отступами и границами (если таковые есть) или растояние от крайнего левого пикселя первой буквы до крайнего правого последней?
            :o
            Сообщение отредактировано: Mixxx -
            Mixxx
            Сообщ. #6 ,

              Profi
              *****
              Профиль · PM
              Поощрения: 13 Dgm
              Рейтинг (т): 107
              seelts
              Первое, вместе с padding'ами и border'aми.
              Хотя div это не очень неудачный пример, для того чтобы продемонстрировать полезность offsetWidth и offsetHeight, тк в других браузерах для Div'a
              offsetWidth и offsetHeight всегда совпадают с шириной и высотой ( + padding + border-width), конечно если такие заданы.
              Вот ещё пример:
              (Смотреть браузером IE6!)
              ExpandedWrap disabled
                 
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                <div style="width:70px;padding:100px;border:1px solid red" onclick=
                'compWidth(this)'>Текст не влезает в див поэтому <b>IE</b> его растягивает</div>
                 
                <div style="width:70px;padding:100px;border:1px solid red" onclick=
                'compWidth(this)'>Текст целиком помещается в div'е, поэтому заданая высота совпадает с реальной</div>
                 
                <script>
                function compWidth(ths)
                {
                alert("вы хотели чтобы ширина div'a была = "+
                (
                    parseInt(ths.style.width)+//width
                    parseInt(ths.style.borderLeftWidth)+//border-left-width
                    parseInt(ths.style.borderRightWidth)+//border-right-width
                    parseInt(ths.style.paddingRight)+//padding-right
                    parseInt(ths.style.paddingLeft)//padding-left
                )+
                "\nА на самом деле она получилась ="+
                ths.offsetWidth)
                }
                </SCRIPT>
              Rom@nych
              Сообщ. #7 ,

                Profi
                *****
                Профиль · PM
                Поощрения: 2 Dgm
                Рейтинг (т): 75
                Всем сенкс. Ушёл от этого. Эт я мучался с менюшкой. Раздобыл классыный сайт с скриптами JS. Вот линка: http://www.twinhelix.com/ Там есть чему поочиться;))
                0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
                0 пользователей:


                Рейтинг@Mail.ru
                [ Script execution time: 0,0244 ]   [ 15 queries used ]   [ Generated: 28.04.24, 06:37 GMT ]  
                Powered by Invision Power Board(U) v1.2 © 2003  IPS, Inc.