Что сделает offsetParent нулевым?
Я пытаюсь сделать позиционирование на JavaScript. Я использую кумулятивную функцию положения на основе классическая функция quirksmode, которая суммирует offsetTop и offsetLeft для каждого offsetParent до верхнего узла.
Однако я столкнулся с проблемой, когда интересующий меня элемент не имеет offsetParent в Firefox. В IE существует offsetParent, но все offsetTop и offsetLeft в сумме дают 0, поэтому у него такая же проблема, как и в Firefox.
Что может привести к тому, что элемент, который хорошо виден и пригоден для использования на экране, не будет иметь offsetParent? Или, что более практично, как я могу найти положение этого элемента, чтобы разместить под ним раскрывающийся список?
Редактировать: Вот как воспроизвести один конкретный пример этого (не решенный в принятом в настоящее время ответе):
- Откройте домашняя страница Stack Overflow.
Запустите следующий код в консоли веб-браузера (например, Chromev21):
var e = document.querySelector('div'); console.info(e); // <div id = "notify-container"></div> do{ var s = getComputedStyle(e); console.info(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?
Реальный пример, показывающий неисправный элемент, может помочь ...
В вашем случае это из-за position:fixed - нет родительского макета
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Если документ не завершил загрузку, offsetParent может иметь значение null.
Это старый вопрос, но у меня другой случай. Если вы манипулируете DOM, вы можете получить нулевое значение offsetParent - в IE6 и IE7.
См .: IE 6/7 - «Неопределенная ошибка» при доступе к offsetParent (Javascript)
Я столкнулся с этой проблемой, когда брат слева от элемента скрыт:
<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 для element3 имеет значение null, хотя сам element3 виден, а родитель виден.
Я видел тонкие Firefox 3.6 и Chrome 5. Кажется, это также влияет на функцию getBoundingClientRect () в element3, что действительно раздражает, поскольку это работает во многих других случаях!
https://developer.mozilla.org/en/DOM/element.offsetParent
offsetParent возвращает значение null, если для элемента style.display установлено значение «none».
В соответствии с моим ответом ниже я отредактировал страницу MDN, чтобы отметить, что существуют другие ситуации для браузеров, отличных от FF, которые также вызывают такую ситуацию.
не так просто, как вы говорите. offsetParent также вернет null, если style.display, например, имеет значение «block», но один из родительских элементов style.display имеет значение «none». вот почему этот метод используется для проверки видимости элемента лучше, чем метод "getComputedStyle", который не проверяет родителей.
offsetParent вернет null, если объект вашего элемента еще не добавлен в DOM.
Я сделал тест на 2304 див. с уникальными комбинациями значений для position, display и visibility, вложенными в уникальные комбинации каждого из этих значений, и определил, что:
в противном случае действительный элемент
это потомок <body>
не будет иметь значения offsetParent, если:
- Элемент имеет
position:fixed(Webkit и IE9) - Элемент имеет
display:none(Webkit и FF) - У любого предка есть
display:none(Webkit и FF)
Также разумно ожидать, что элемент, у которого нет родителя или который не добавлен к самой странице (не является потомком <body> страницы), также будет иметь offsetParent==null.
Большое спасибо, ваш ответ заставил меня понять, почему этот код stackoverflow.com/a/21696585/4481831 работал в FF, но не в Chrome.
Я также испытал offsetParent из null, когда родитель находился внутри веб-компонента (т.е. элемент, из которого я пытался получить offsetParent, был спроецирован в веб-компонент).
Пожалуйста, опубликуйте образец кода.