Javascript claro para jQuery - clientHeight

que tiene la siguiente secuencia de comandosJavascript claro para jQuery - clientHeight

(function(win){ 
    var doc = win.document; 
    if (doc.querySelector && doc.addEventListener) { 
     var toggler = doc.querySelector('.toggle-menu') 
     var menu = doc.querySelector('.main-nav ul'); 
     menu.style.height = '0px'; 
     toggler.addEventListener('click',function(e) { 
      e.preventDefault(); 
      if (menu.style.height == '0px') { 
       menu.style.height = 'auto'; 
       if (menu.clientHeight != 0) { 
        menu.style.height = menu.clientHeight+'px'; 
       } 
      } else { 
       menu.style.height = '0px'; 
      } 
     }); 
    } 
})(this);

¿Cuál será la versión de jQuery de ese guión, ya que no puedo encontrar un equivalente a jQuery clientHeight.

Fuente

2012-05-03 alexandra siracevska

Puede obtener resultados similares, pero no hay un equivalente exacto de customerHeight en jQuery. ¿Por qué no puedes mezclar los dos? Todavía puede usar el clienteHeight de JS mientras usa jQuery. – dweiss

Bien, estoy aprendiendo jQuery, así que es por eso que pregunté. –

clientHeight no es una propiedad jQuery. Fue introducido en Internet Explorer, pero no es parte de las especificaciones W3C. Parece que solo es compatible con Firefox e Internet Explorer. Sin embargo, he probado que funciona en la última versión de Chrome. No estoy seguro si los resultados son estándar en los navegadores, aunque el enlace que publiqué a continuación sugiere que no.

Además, Mozilla sugiere la siguiente fórmula para ser utilizado en lugar de los navegadores que no soportan:

clientHeight se puede calcular como la altura CSS + acolchado CSS - altura de barra de desplazamiento horizontal (si está presente)

Supongo que es la barra de desplazamiento del elemento en sí, no toda la ventana del navegador, a menos que el elemento ocupe toda la ventana.

Fuentes:

Fuente

2012-05-03 00:59:32

Gracias por la información. –

Sea bienvenido –

Creo que, incluso si es "compatible", es más seguro usar estos atributos CSS estándar (alto y relleno). – dweiss

No es .height(). Devolverá la altura de un elemento.

var menu = $('.main-nav ul'); 
.... 
menu.height()+'px';

Fuente

2012-05-03 01:00:30 Bakudan

Alexandra ya está usando .height en su script, así que supongo que ya sabe sobre .height, pero es consciente de que no es lo mismo. – dweiss

@dweiss La pregunta era y sigue siendo "jQuery". El querySelector debería reemplazar el chisporroteo en jQuery: los selectores. – Bakudan

En lo que a día de hoy - de septiembre de el año 2016, lo que puedo ver que jQuery (versión 3.1.0) todavía no incluye su propio método para obtener el element.clientWidth y element.clientHeight de una manera normalizada al otro lado de los diferentes navegadores.

Sin embargo, investigando en diferentes fuentes, resulta que estas propiedades nativas de JavaScript son bien compatibles en la mayoría de los navegadores que se usan hoy en día.
En el MDN clientHeight article puedo leer que es compatible con Chrome, Firefox (Gecko), Internet Explorer, Opera, Safari (WebKit), pero no se especifica el control de versiones.

QuirksMode especifica these properties are supported from IE 9+ and other browsers cuando se aplica a los objetos window y document.

En otro artículo quirksmode en las dos propiedades aplicadas a elementos de la página, no hay especificaciones sobre el apoyo del navegador se da, sino una muy útil probador de páginas está disponible a prueba por sí mismo dimensiones del elemento de coherencia en los navegadores que tienen:

http://www.quirksmode.org/dom/tests/elementdimensions.html

en this article treating the clientHeight property no es un enfoque importante en las diferencias entre los píxeles físicos y lógicos en píxeles IE y el IE 8 <> = 8:

en Internet Explorer anterior a la versión 8, recupera la altura en tamaño de píxel físico, mientras que a partir de la versión 8, devuelve la altura en tamaño de píxel lógico.

Suponiendo que el uso del zoom en los navegadores se utiliza principalmente en los dispositivos móviles, creo que eso:

es lo suficientemente seguro usando element.clientWidth y element.clientHeight para las páginas de la audiencia de escritorio/aplicaciones web;
para páginas entre sitios/aplicaciones web el uso de unidades de medida relativa (por ejemplo, em) podría resolver la brecha entre los píxeles físicos y lógicos.

Para un manejo más fácil dimensiones, unidad em podría mejorar el desarrollo multiplataforma (W3 org specs on units and rem's draft), que parece ser supported on modern browsers. Todavía no tengo experiencia en unidades de medida relativa en consultas de medios CSS, pero al leer esto interesting article on the best unit measure for CSS media-queries quizás merezca un estudio.

Se agradece cualquier opinión sobre estas consideraciones.

Fuente

2016-09-05 12:04:45

Javascript claro para jQuery - clientHeight

Respuesta

Cuestiones relacionadas