Las propiedades screenX , screenY , offsetLeft , offsetTop , screenTop , screenLeft

Introducción

A veces cuando necesitamos de la posición de un elemento HTML con respecto a su nodo padre para desarrollar por ejemplo un tipo de tooltip , o quizás también la posición del cursor para que sea acompañado de un mensaje. Toda esta información y más la podemos obtener de las propiedades del objeto window , y como siempre no todas las propiedades funcionan en todos los navegadores.

La propiedad screenX , screenY ( screenLeft, screenTop para IE)

Devuelve un entero igual a la distancia horizontal entre el lado izquierdo de la pantalla y el lado izquierdo del navegador( en el caso de screenX)  y para el caso de screenY es la distancia vertical.

Sintaxis: window.screenX

Observaciones :
  1.  screenX, screenY sólo funciona para IE a partir de la versión 9.
  2.  Podemos utilizar la propiedad screenLeft y screenTop para Internet Explorer.
  3.  En modo maximizado el navegador Firefox y Safari pueden devolver -8px en screenX y screenY.
  4.  El valor de screenTop en IE y Safari es la distancia de la parte superior de la pantalla a la parte superior de la página y no del navegador como en los otros navegadores. 

Ejemplo : Uso de screenX , screenY (para IE usar screenTop y screenLeft)
<script type="text/javascript">
    
    function posicion(){
 
        var msj = '';
 
        //screenTop y screenLeft funciona en todos los navegadores, pero no en Firefox
        if('screenTop' in window)
            msj+="\n screenTop : "+window.screenTop+" ,screenLeft : "+window.screenLeft;
 
        //screenX y screenY funciona en todos los navegadores excepto IE
        if('screenX' in window)
            msj+="\n screenY : "+window.screenY+" ,screenX : "+window.screenX;
  
        alert(msj);
    } 

</script>

<input type="button"  onclick="posicion()" value="obtener !">
Demostración

No hay comentarios:

Publicar un comentario