JS para obtener el código de implementación del elemento en relación con la posición de la ventana

JS obtiene el Offsettop, OffsetLett y otras propiedades del elemento

obj.ClientWidth // Obtener el ancho del elemento

obj.clientHeight // la altura del elemento

obj.offsetleft // El elemento relativo a la izquierda del elemento principal

obj.offsettop // La parte superior del elemento en relación con el elemento principal

obj.offsetwidth // el ancho del elemento

obj.offsetheight // la altura del elemento

la diferencia:

Clientwidth = ancho + relleno

clientHeight = altura + relleno

offsetWidth = ancho + relleno + borde

Offsetheight = ancho + relleno + borde

El compensación tiene más ancho de borde que el cliente

 // Obtenga la coordenada horizontal de la función de elemento (en relación con la ventana) getTop (e) {var offset = e.offsettop; if (e.offsetParent! = null) offset+= getTop (e.offsetParent); return offset;} // Obtenga la coordenada horizontal de la función de elemento (relativa a la ventana) getLeft (e) {var offset = e.offsetleft; if (e.offsetParent! = null) offset+= getleft (e.offsetParent); return offset;}

También he escrito un artículo de JS sobre las ubicaciones de Getting Element: JS obtiene el Offsettop, Offsetleft y otros atributos del elemento. Podemos obtener la posición del elemento en relación con la ventana a través de los atributos Offsettop y Offsetleft, pero los atributos Offsettop y Offsetleft están posicionados en relación con el elemento principal, y los elementos que generalmente necesitan obtener la posición no son en la capa más externa, por lo que los atributos relacionados con el desorden que están en el elemento superior son indispensables. Entonces la eficiencia se convierte en un problema.

 // Obtenga la coordenada horizontal de la función de elemento (relativa a la ventana) getTop (e) {var offset = e.offsettop; if (e.offsetParent! = Null) offset+= getTop (e.offsetParent); return offset;} // Obtener la coordenada horizontal del elemento (la función de la ventana) Getleft (E) {Var) { offset = e.offsetleft; if (e.offsetParent! = null) offset+= getleft (e.offsetParent); return offset;}

Afortunadamente, el navegador me proporcionó la interfaz correspondiente GetBoundingClientRect. Este método apareció por primera vez en el navegador IE. Los navegadores posteriores también admitieron este método, y fue más perfecto. En IE, solo pueden obtener los atributos de los elementos izquierdo, superior, inferior y derecho, y los navegadores modernos posteriores también pueden obtener el ancho y el ancho de los elementos.

Cabe señalar aquí que la parte inferior es la distancia entre la parte inferior del elemento y la parte superior de la ventana, en lugar de la parte inferior de la posición en CSS en relación con la parte inferior de la ventana. Del mismo modo, el atributo RIHGT es la distancia entre el elemento más derecho y el lado izquierdo de la ventana.

 var box = document.getElementById ("box"); var Pos = box.getBoundingClientRect (); box.innerhtml = "top:"+pos.top+"izquierda:"+pos.left+"fondo:"+pos.bottom+"derecho:"+pos.rugio+"ancho:"+pos.width+"altura:"+pos.height

Artículos originales, indique la reimpresión: reimpreso del desarrollo front-end