Есть некоторые методы для JS, чтобы получить ширину и высоту скрытых элементов в Интернете, но могут быть некоторые ситуации, которые нельзя получить.
Например:
<! Doctype html> <html lang = "en"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> test </title> </head> <body> <div id = "test". Все реки и моря выливаются в реки и моря, и они даются людям мира. </div> <div id = "test2" style = "display: none"> <div style = "display: none"> <div id = "test2_child"> У меня есть горшок с вином, которого достаточно, чтобы утешить пыль. Все реки и моря выливаются в реки и моря, и они даются людям мира. </div> </div> </div> <div id = "test3"> <div> <div id = "test3_child"> У меня есть горшок с вином, которого достаточно, чтобы утешить пыль. Все реки и моря выливаются в реки и моря, и они даются людям мира. </div> </div> </div> </div> </body> </html>
Тест может быть получен, но тест2_child не может быть получен. В связи с этой ситуацией я написал метод, чтобы решить его сам.
Решение:
1. Получите элемент (возьмите ширину и высоту) все скрытые элементы предка, пока элемент тела, включая себя.
2. Получите свойства дисплея и видимости всех скрытых элементов и сохраните их.
3. Установите все скрытые элементы на видимость: скрыто; дисплей: блок! Важно; (Причина важного - избежать недостаточного приоритета).
4. Получите ширину и высоту элемента (возьмите ширину и высоту).
5. Восстановите свойства отображения и видимости стиля всех скрытых элементов.
6. Возвращает ширину элемента и значение высоты.
Реализация кода:
Функция GetSize (id) {var width, height, elem = document.getelementbyid (id), nonenodes = [], nodestyle = []; getNonenode (elem); // Получить элемент многослойного дисплея: нет; SetNodestyle (); ширина = elem.clientWidth; высота = elem.clientHeight; resumenodestyle (); return {width: width, высота: высота} function getNonenode (node) {var display = getStyles (node) .getPropertyValue ('display'), tagname = node.nodeName.toloverse (); if (display! = 'none' && tagname! = 'body') {getNonenode (node.parentnode); } else {nonenodes.push (node); if (tagname! = 'body') getNonenode (node.parentnode); }} // Этот метод может получить, есть ли окончательная настройка свойства дисплея, и не может быть style.display. Функция GetStyles (elem) {// Поддержка: т.е. <= 11+, Firefox <= 30+ ( #15098, #14150) // т.е. бросает элементы, созданные во всплывании // FF Между тем, броскам кадрирования через «defaultView.getComputEdstyle» var view = elem.OwnerDocument.DefaultView; if (! View ||! View.opener) {view = window; } return view.getComputedStyle (elem); }; function setNoDestyle () {var i = 0; for (; i <nonenodes.length; i ++) {var viseibility = nonenodes [i] .style.visibility, display = nonenodes [i] .style.display, style = nonenodes [i] .getattribute ("style"); // перезаписать другие стили отображения неэноды [i] .setAttribute («Стиль», «Видимость: скрыто; дисплей: block! nodestyle [i] = {видимость: видимость, отображение: дисплей}}} function resumenodestyle () {var i = 0; for (; i <nonenodes.length; i ++) {nonenodes [i] .style.visibility = nodestyle [i] .visisibility; nonenodes [i] .style.display = nodestyle [i] .display; }}}Пример демонстрации:
var testsize = getsize ('test'); console.log ("test-> width:" + testsize.width + "height:" + testsize.height); var test2childsize2 = getsize ('test2_child'); консоль test2childsize2.height); var test3childsize = getSize ('test3_child'); console.log ("test3_child-> width:" + test3childsize.width + "Высота:" + test3childSize.height); // Значение печати выглядит следующим образом.Примечания:
1. Open Показать все скрытые элементы предка и получить значения ширины и высоты элемента. В некоторых случаях это может быть неправильно, чтобы получить значение.
PS: Но не беспокойтесь об этом, просто взломайте метод, когда что -то действительно пойдет не так.
2. Причина, по которой скрытый дисплей исконного элемента и атрибуты видимости должна быть отменена позже, не затрагивая себя.
3. Кроме того, метод GetStyles извлекается из исходного кода jQuery, так что этот метод может получить, существует ли окончательная настройка атрибута отображения.
PS: не может быть получено из Style.Display.
Приведенный выше метод получения скрытых элементов в JS - это весь контент, разделенный редактором. Я надеюсь, что это может дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.