Как получить размеры / размещение HTML-элементов, используя jQuery?

Question

Я пытаюсь получить высоту, ширину и расположение фрагмента HTML-кода, чтобы я мог создать <div> с position: absolute для наложения соответствующего HTML-кода. Иногда этот HTML представляет собой отдельный элемент, а иногда - набор элементов.

Я пытался обернуть соответствующий HTML-код в <span>, а затем использовать $('#spanToMeasure').height() и .width() и .offset(), но я получаю противоречивые результаты. Иногда высота и / или ширина возвращаются как 0, тогда как на самом деле это не так, а иногда размещение отключено.

Я также пытался использовать $(window).load() вместо $(document).ready(), но результаты выглядят одинаково.

Мой метод не работает из-за CSS, который изменяет размеры / размещение? Или что-то еще происходит? Любая помощь приветствуется!

Вот мой полный код:

  $(document).ready(function() {
    // Create a container to hold all of the overlays.
    var $overlayContainer = $('<div id="easy_edit_overlays">').appendTo('body');

    // Find all of the sections of code to create overlays for.
    $('span.easy_edit').each(function() {
      var $this = $(this);

      $this.removeClass('easy_edit');

      var height = $this.height();
      var width = $this.width();

      var offset = $this.offset();

      // Create overlay.
      var $editOverlay = $('<div>').addClass('easy_edit_overlay')
                                   .height(height)
                                   .width(width)
                                   .css('background-color', 'red')
                                   .css('opacity', '0.5')
                                   .css('top', offset.top)
                                   .css('left', offset.left)
                                   .css('position', 'absolute');

      // Create link to include within overlay.
      var $editLink = $('<a>').attr('href', $this.attr('class'))
                              .attr('target', '_blank')
                              .css('display', 'block')
                              .css('height', height)
                              .css('color', 'red')
                              .text('Edit');

      $editLink.appendTo($editOverlay);

      $editOverlay.appendTo($overlayContainer);

      // Remove the <span> tag and replace with its children.
      $this.replaceWith($this.html());
    });
  });

Answer 1

Проблема, с которой вы столкнулись, вероятнее всего связана с тем, что <span> является встроенным элементом, что означает, что его размеры могут быть вычислены неправильно.См. Эту статью для описания того, как несколько атрибутов применяются по-разному между блочными и встроенными элементами: http://www.maxdesign.com.au/articles/inline/

Что касается позиционирования, вы можете рассмотреть разницу между .offset() и .position().Я связал документацию для обоих ниже:

• .position () Документация
• .offset () Документация

РЕДАКТИРОВАТЬ:

Это на самом деле не решает вашу конкретную проблему, но у меня есть предложение, чтобы сделать вашу жизнь проще.Уже существует плагин под названием ternElapse , который делает именно то, что вы хотите сделать.Может быть, вы могли бы использовать это, вместо того, чтобы заново изобретать колесо?

Надеюсь, они уже решили проблему, с которой вы столкнулись, и нашли решение:)

Answer 2

Элемент span является встроенным элементом, поэтому он не всегда покрывает квадратную область, которая может быть покрыта элементом div.Например, оно может содержать два слова, и одно слово находится в конце строки, а другое слово - в начале следующей строки.Это сделало бы span состоящим из двух прямоугольных областей.

Если вы хотите элемент, размер которого всегда можно получить, вы должны использовать элемент блока.

Answer 3

Это довольно легко сделать:

$(document).ready(
    function(){
        $('#elementID').click(
            function(){
                var position = $('#elementID').offset(),
                xPos = position.left,
                yPos = position.top,
                width = $('#elementID').width(); // or $('#element').outerWidth(),
                height = $('#elementID').height();
                $('#x').text('xPos: ' + xPos);
                $('#y').text('yPos: ' + yPos);
                $('#h').text('Height: ' + height);
                $('#w').text('Width: ' + width);
            });
    }
);

Демонстрация по адресу: JS Fiddle

Для получения противоречивых результатов стоит проверить следующее:

1. Позиционируете ли вы элемент position: absolute относительно правильного контейнера (его родитель должен иметь указанный атрибут position, в противном случае он просто всплывает, чтобы позиционироваться против первого предка с указанным position).
2. Существуют ли элементы, высота которых вы находите, в DOM во время запуска функции.
3. Есть ли у элементов display: visible.
4. То, что значения, с которыми вы работаете в своих функциях, не управляются другим источником в другом месте вашего скрипта.