В течение долгого времени я искал способ обнаружения, когда размер или позиция элемента DOM изменился. Это может быть связано с тем, что окно изменилось, или потому, что к элементу были добавлены новые дочерние элементы или потому, что вокруг этого элемента были добавлены новые элементы или из-за изменения правил CSS или из-за того, что пользователь изменил размер своего браузера. Существует огромное количество причин, по которым размер элемента или позиция будут меняться.
Я могу подключить обработчики событий для многих из этих событий, но я думаю, что есть случаи, которые не покрываются. Я надеялся использовать MutationObservers, чтобы просто наблюдать за элементом offsetWidth или clientWidth, но похоже, что они применимы только к атрибутам DOM, а не к свойствам Node (или, может быть, именно к тому, что реализуется Webkit). Итак, чтобы быть действительно пуленепробиваемым, похоже, что мне все равно нужно запустить петлю опроса.
Это правильно? Я пропустил что-то важное? Является ли опрос единственным пуленепробивным способом определения размера или положения элемента?
Edit
Чтобы дать немного больше контекста, это не привязано ни к одному конкретному случаю использования. Для меня это снова и снова. В моей нынешней ситуации я надеялся, что с помощью CSS будет создан холст, который будет иметь 100% ширину и высоту его родителя. Я хочу, чтобы script изменял свойства ширины и высоты холста при изменении его offsetWidth или clientWidth (это для WebGL, где свойства ширины и высоты влияют на разрешение framebuffer). В другом проекте я хотел, чтобы элемент расширялся по высоте, чтобы заполнить все оставшееся пространство в окне браузера пользователя. Я снова и снова сталкивался с этой ситуацией, и, как неизбежно, решение выглядит следующим образом:
- Прослушать window.resize
- Подключитесь к любому написанному вами коду, который может изменить DOM (или, возможно, использовать Mutation Events или Mutation Observers).
- Имейте периодическую операцию опроса для очистки всех пропущенных случаев.
(большинство людей останавливается на 1 и, возможно, делает немного 2)
Я просто хотел убедиться, что у меня не хватает чего-то жизненно важного.
Кстати, в моей ситуации в WebGL достаточно прослушивания window.resize(и несколько предпочтительнее, потому что одновременно изменяются размеры холста и разрешение рендеринга).
