#jquery #hidden #offset
#jquery #скрытый #смещение
Вопрос:
Как я могу получить координаты скрытого элемента? offset() не поддерживает использование скрытых элементов. Есть какие-нибудь подсказки?
Комментарии:
1. попробуйте использовать .position().X и Y
2. определение положения не работает. я использую локальную переменную для storage .offset() до того, как она была установлена невидимой.
3. Ни в коем случае. Используйте описанные ниже обходные пути. В соответствии с вашими целями, вы можете просто использовать visibility: hidden вместо display: none, и вы сможете получить позицию.
4. @p0rsche ты прав, спасибо
5. Я смеюсь, потому что я «инвестировал» последний час… (теперь это кажется очевидным)
Ответ №1:
Если ваш элемент был .hide() вызван по нему, или если он есть display:none в css, браузер вообще не беспокоится о его рендеринге. В этом случае ответ не является прямым. В последних jQueries вы даже не можете получить его ширину или высоту.
С другой стороны, если вы .show() создаете элемент, то .hide() запускайте его перед циклом выполнения (событие, которое запускается, когда для этого события больше нет кода для запуска), браузер будет вынужден ретранслировать страницу, и вы сможете получить ее смещение между тем, когда она показана и скрыта, но она не будет принудительно перерисовываться, поэтому ваши пользователи не увидят всплеска, и вы не потеряете столько производительности, сколько могли бы подумать.
Комментарии:
1. Если этот элемент содержит больше информации, такой как изображения и другие материалы, я думаю: ДА, пользователь мог видеть раздражающий «блиц» в нескольких браузерах.
2. Нет. Возможно, в старых браузерах, но современные браузеры будут ретранслировать, но не перерисовывать, пока это абсолютно необходимо. Вот тест, который я провел: pastie.org/1892044 и временная шкала, которую выдал Chrome Inspector: skitch.com/cxlt/r67h3/developer-tools-file-tmp-test.html Как вы можете видеть, необходимо разметить и пересчитать стили, но он не перерисовывает экран до тех пор, пока не будут выполнены
show(), измерение иhide().3. Это здорово, за исключением того, что вы использовали: <div class=»display:none»> Хм, ‘CLASS’ … опечатка? 😉
Ответ №2:
Вы можете получить координаты visibility:hidden элемента, но display:none элемент исключен из дерева рендеринга. Таким образом, его позиция не определена.
Комментарии:
1. На самом деле это правильный ответ. Кроме того, поскольку visibility:hidden занимает много места, вы также можете добавить position:absolute в CSS для вашего DIV, это сделало бы его действительно невидимым (поскольку он больше не занимал бы никакого места в макете). Приветствия.
Ответ №3:
Кроме быстрого отображения и выполнения действий и скрытия процедуры, возможно, было бы возможно просто использовать маску загрузки, чтобы притвориться, что экран (или его часть) невидим.
Это произошло, когда я работал над картой, на которой были скрытые элементы. Мне нужно было прочитать css-позиции / смещения без отображения этих элементов. Я придумал три возможных метода для использования:
-
пока загрузите маску поверх карты, чтобы карта не отображала скрытые элементы, и считайте смещения (проблема: наложение также скрывает родительский элемент (карту)). Это работает лучше всего, если нет родительского элемента, который требует отображения.
-
измените z-индекс скрытых элементов, чтобы они находились за родительским элементом, отображали amp; и считывали значения, скрывали их и меняли z-индекс на исходный.
-
используйте отдельные переменные данных для CSS-стилей, чтобы они были частью элемента. Это хорошо работает, если элементы имеют фиксированные / абсолютные позиции относительно окна или определенного элемента, поскольку css-позиции / смещения не будут меняться в зависимости от размера окна / элемента. В моем случае это хорошо сработало, поскольку я работал с элементами, абсолютными по отношению к window (полноэкранное / оконное приложение).
Другие методы, предлагаемые пользователями, тоже работают, но все зависит от того, над чем вы работаете.
Ответ №4:
Недавно я наткнулся на Element.getClientRects(), который возвращает a DOMRectList с DOMRect элементами внутри. Я протестировал его на скрытом элементе на моем веб-сайте, и он вернул правдоподобные координаты на
document.querySelector('#someHiddenElement').getClientRects()[0]
Однако это вернет несколько DOMRect строк, если вы примените его, например, к многострочному DOMRect тексту, поэтому здесь вам следует учитывать несколько / все содержащиеся строки, а не только первую.