javascript - internet - clientHeight/clientWidth devuelve diferentes valores en diferentes navegadores
is javascript enabled (9)
Las propiedades document.body.clientHeight y document.body.clientWidth devuelven valores diferentes en IE7, IE8 y Firefox:
IE 8:
document.body.clientHeight : 704
document.body.clientWidth : 1148
IE 7:
document.body.clientHeight : 704
document.body.clientWidth : 1132
Firefox:
document.body.clientHeight : 620
document.body.clientWidth : 1152
¿Por qué existe esta discrepancia?
¿Hay propiedades equivalentes que sean consistentes en diferentes navegadores (IE8, IE7, Firefox) sin usar jQuery?
Algo más de información para la ventana del navegador: http://www.w3schools.com/js/js_window.asp?output=print
El elemento del cuerpo toma el ancho disponible, que generalmente es la ventana del navegador. Como tal, serán diferentes dimensiones las que crucen el navegador debido a los bordes de cromo del navegador, las barras de desplazamiento, el espacio vertical siendo ocupado por los menús y todo lo demás ...
El hecho de que las alturas también varían, también me dice que estableces la altura del cuerpo / html al 100% a través de CSS, ya que la altura generalmente depende de los elementos dentro del cuerpo .
A menos que establezca el ancho del elemento del cuerpo en un valor fijo a través de css o su propiedad de estilo, sus dimensiones por lo general, siempre variarán los buscadores cruzados / versiones y quizás incluso dependiendo de los complementos que instaló para el navegador. Los valores constantes en tal caso son más una excepción a la regla ...
Cuando invocas .clientWidth en otros elementos que no toman el ancho automático de la ventana del navegador, siempre devolverá los elementos ''width'' + ''padding''. Entonces un div con ancho 200 y un relleno de 20 tendrá clientWidth = 240 (20 relleno a la izquierda y a la derecha).
La razón principal, sin embargo, por la que uno invocaría clientWidth, es exactamente debido a posibles discrepancias esperadas en los resultados. Si sabe que obtendrá un ancho constante y el valor es conocido, invocar a clientWidth es redundante ...
El equivalente de offsetHeight y offsetWidth en jQuery es $ (ventana) .width (), $ (ventana) .height () No es el clienteHeight y clientWidth
Esto tiene que ver con el modelo de caja del navegador. Use algo como jQuery u otra biblioteca de abstracción de JavaScript para normalizar el modelo de DOM.
Lo que hice para solucionar mi problema con el clienteHeight es usar el cliente Hight de los controles firstChild. Utilizo IE 11 para imprimir etiquetas desde una base de datos y el clienteHeight que funcionó en IE 8 devolvió la altura de 0 en IE 11. Encontré una propiedad en ese control que estaba listada como firstChild y que tenía una propiedad si clientHeight y realmente tenía la altura que estaba buscando. Entonces, si su control devuelve un tamaño de cliente de 0, eche un vistazo a la propiedad de su firstChild. Me ayudó...
Paul A tiene razón acerca de por qué existe la discrepancia, pero la solución ofrecida por Ngm es incorrecta (en el sentido de JQuery).
El equivalente de clienteHeight y clientWidth en jquery (1.3) es
$(window).width(), $(window).height()
Puede ser causado por el error del modelo de caja de IE. Para solucionar esto, puede usar el Hack de modelo de caja .
tuve un problema similar - firefox devolvió el valor correcto de obj.clientHeight, pero no lo hizo - devolvió 0. Lo cambié a obj.offsetHeight y funcionó. Parece que hay algún estado que, por ejemplo, tiene para customerheight, eso lo hace dudoso ...
Element.clientWidth & Element.clientHeight devuelve el alto / ancho del contenido de ese elemento además de cualquier relleno aplicable.
La implementación jQuery de estos son: $(target).outerWidth() y $(target).outerHeight()
.clientWidth y .clientHeight están incluidos en la especificación del módulo de vista de CSSOM que se encuentra actualmente en la etapa de borrador de trabajo. Si bien los navegadores modernos tienen una implementación consistente de esta especificación, para asegurar un rendimiento consistente en las plataformas heredadas, la implementación de jQuery aún debe ser utilizada.
Información Adicional:
- https: //developer.mozilla [dot] org / es-US / docs / Web / API / Element.clientWidth
- https: //developer.mozilla [dot] org / es-US / docs / Web / API / Element.clientHeight