Что бы сделать offsetParent нулевым?
Я пытаюсь сделать позиционирование в JavaScript. Я использую кумулятивную функцию положения, основанную на классической функции Quirksmode, которая суммирует offsetTop
а также offsetLeft
для каждого offsetParent
до верхнего узла.
Однако я сталкиваюсь с проблемой, когда интересующий меня элемент не имеет offsetParent
в Firefox. В IE offsetParent
существует, но offsetTop
а также offsetLeft
все суммы до 0, так что это имеет ту же проблему, что и в Firefox.
Что может привести к тому, что элемент, который четко виден и пригоден для использования на экране, не будет иметь offsetParent
? Или, на практике, как я могу найти положение этого элемента, чтобы разместить под ним раскрывающийся список?
Изменить: Вот как воспроизвести один конкретный случай этого (не решен в настоящее время принятый ответ):
- Откройте домашнюю страницу переполнения стека.
Запустите следующий код в консоли веб-браузера (например, Chromev21):
var e = document.querySelector('div'); console.log(e); // <div id="notify-container"></div> do{ var s = getComputedStyle(e); console.log(e.tagName,s.display,s.visibility,s.position,e.offsetParent); } while(e=e.parentElement) // DIV block visible fixed null // BODY block visible static null // HTML block visible static null
Почему offsetParent
этого элемента null
?
6 ответов
Если документ не закончил загрузку, тогда offsetParent может быть нулевым
Я сделал тест 2,304 делений с уникальными комбинациями значений для position
, display
, а также visibility
, вложенный в уникальные комбинации каждого из этих значений, и определил, что:
иначе действительный элемент
это потомок <body>
не будет иметь offsetParent
значение, если:
- Элемент имеет
position:fixed
(Webkit и IE9) - Элемент имеет
display:none
(Webkit и FF) - Любой предок имеет
display:none
(Webkit и FF)
Также разумно ожидать, что элемент, у которого нет родителя или который не добавлен к самой странице (не является потомком <body>
страницы), также будет иметь offsetParent==null
,
https://developer.mozilla.org/en/DOM/element.offsetParent
offsetParent возвращает значение NULL, если для элемента style.display установлено значение "none".
Это старый вопрос, но у меня есть другой случай. Если вы манипулируете DOM, вы можете получить нулевой offsetParent - в IE6 и IE7.
См. IE 6/7 - "Неопределенная ошибка" при доступе к offsetParent (Javascript)
offsetParent
вернет ноль, если ваш элемент элемента еще не был добавлен в DOM.
Я также испытал offsetParent
из null
когда родитель был внутри веб-компонента (то есть элемента, который я пытался получить offsetParent
of был спроецирован в веб-компонент).
Я столкнулся с этой проблемой, когда один из элементов слева от элемента скрыт:
<div id="parent">
<div id="element1">some stuff</div>
<div id="element2" style="display: none">some hidden stuff</div>
<div id="element3">child whose offset we want</div>
</div>
Я столкнулся со случаем, когда offsetParent элемента 3 равен нулю, хотя сам элемент 3 является видимым, а родительский элемент видимым.
Я видел тонкие Firefox 3.6 и Chrome 5. Похоже, что это также влияет на функцию getBoundingClientRect() на element3, что действительно раздражает, поскольку работает во многих других случаях!