Hay algunos métodos para que JS obtenga el ancho y la altura de los elementos ocultos en Internet, pero puede haber algunas situaciones que no se pueden obtener.
Por ejemplo:
<! DocType html> <html lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> test </title> </head> <body> <d id id = "test" style = "display: no". Todos los ríos y mares se verten en los ríos y los mares, y se les dan a la gente del mundo. </div> <div id = "test2" style = "Display: None"> <div style = "Display: None"> <div id = "test2_child"> Tengo una olla de vino que es suficiente para consolar el polvo. Todos los ríos y mares se verten en los ríos y los mares, y se les dan a la gente del mundo. </div> </div> </div> <div id = "test3"> <div> <div id = "test3_child"> Tengo una olla de vino que es suficiente para consolar el polvo. Todos los ríos y mares se verten en los ríos y los mares, y se les dan a la gente del mundo. </div> </div> </div> </div> </body> </html>
La prueba se puede obtener, pero no se puede obtener test2_child. En vista de esta situación, escribí un método para resolverlo yo mismo.
Solución:
1. Obtenga el elemento (tome el ancho y la altura) todos los elementos de antepasados ocultos hasta el elemento del cuerpo, incluido usted mismo.
2. Obtenga las propiedades de visualización y visibilidad de todos los elementos ocultos y guárdelos.
3. Establezca todos los elementos ocultos en la visibilidad: Oculto; Pantalla: ¡Bloque! Importante; (La razón de importante es evitar la prioridad insuficiente).
4. Obtenga el ancho y la altura del elemento (tome el ancho y la altura).
5. Restaurar las propiedades de visualización y visibilidad del estilo de todos los elementos ocultos.
6. Devuelve el ancho del elemento y el valor de altura.
Implementación del código:
function getSize (id) {Var ancho, altura, elem = document.getElementById (id), no enodes = [], nodestyle = []; getNonenode (Elem); // Obtener el elemento de la pantalla múltiple: ninguna; setNodeStyle (); ancho = elem.clientwidth; altura = elem.clientHeight; reumenodestyle (); return {width: width, altura: altura} function getNonenode (nodo) {var display = getStyles (nodo) .getPropertyValue ('display'), tagName = node.nodeName.tOlowerCase (); if (display! = 'none' && tagName! = 'Body') {getNonenode (node.parentNode); } else {no enodes.push (nodo); if (tagName! = 'Body') getNonenode (node.parentNode); }} // Este método puede obtener si existe la configuración de propiedad de pantalla final y no puede ser style.display. Función GetStyles (Elem) {// Soporte: IE <= 11+, Firefox <= 30+ ( #15098, #14150) // IE se lanza elementos creados en emergencias // ff Mientras tanto, se lanza en los elementos de cuadro a través de "default.getComputedStyle" var View = Elem.OwnerDocument.defaultView; if (! View ||! View.opener) {View = Window; } return View.getComputedStyle (Elem); }; función setNodeStyle () {var i = 0; for (; i <nonnodes.length; i ++) {var visibilidad = nonneodes [i] .style.visibility, display = nonenodes [i] .style.display, style = no Enodes [i] .getAttribute ("estilo"); // sobrescribe otros estilos de pantalla no Enodes [i] .SetAttribute ("estilo", "Visibilidad: Hidden; Display: Bloque! Importante;" + estilo); NodeStyle [i] = {Visibility: Visibility, Display: Display}}} function reuMeDeStyle () {var i = 0; para (; i <nonenodes.length; i ++) {no enodes [i] .style.visibility = nodestyle [i] .visibility; non -Enodes [i] .style.display = nodestyle [i] .display; }}}Ejemplo de demostración:
var testSize = getSize ('test'); console.log ("test-> width:" + testSize.width + "altura:" + testSize.height); var test2childsize2 = getSize ('test2_child'); console.log ("test2child2-> width:" + test2childsize2.width + "altura:" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" test2childsize2.height); var test3childsize = getSize ('test3_child'); console.log ("test3_child-> width:" + test3childsize.width + "altura:" + test3childsize.height); // El valor de impresión es el siguiente Tests-> Ancho: 417 Altura: 18Test2Child2-> Ancho: 417 Altura: 18Test3_Child-> Ancho: 417 Altura: 18Notas:
1. Abra Mostrar todos los elementos de antepasados ocultos y obtener los valores de ancho y altura del elemento. En algunos casos, puede ser incorrecto obtener el valor.
PD: Pero no se preocupe por esto, simplemente piratee el método cuando algo realmente sale mal.
2. La razón por la cual la visualización de elementos ancestrales ocultos y los atributos de visibilidad deben retroceder más tarde sin afectarse.
3. Además, el método GetStyles se extrae del código fuente jQuery, para que este método pueda obtener si existe la configuración de atributo de visualización final.
PD: no se puede obtener de Style.
El método anterior para obtener elementos ocultos en JS es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.