objeto de pantalla
Obtenga la altura y el ancho de la pantalla (resolución)
screen.width // amplio screen.height // alta pantalla.availwidth // La pantalla se puede usar para restar el valor después de la altura del componente del sistema.availheight // La pantalla se puede usar para restar el ancho de píxel del componente del sistema.
objeto de ventana
Obtenga la posición y el tamaño de la ventana
ventana.screentop // La distancia desde la parte superior de la ventana hasta la parte superior de la ventana de la pantalla. // Chrome 1366 FF 1366 IE 1366 Window.innerHeight // La altura del punto de vista en la ventana Este valor está relacionado con factores como si el navegador muestra la barra de menú, etc. alerta (Window.innerHeight); // Chrome 643 ff 657 IE 673Window.outerwidth // El ancho de la ventana del navegador en sí (ancho de área visible + ancho de borde del navegador) alerta (Window.outerwidth); // Chrome 1366 FF 1382 IE 1382 // Indica que cuando el Chrome se maximiza, la ventana del navegador no tiene ancho de borde, y cuando no se maximiza, hay un ancho de borde de 8px // ff e Ie, hacia abajo, hacia abajo, la ventana izquierda y derecha. // Chrome 728 ff 744 IE 744
objeto de elemento
Antes de introducir las diversas alturas y anchos de los objetos de elementos, es necesario explicar el modelo de caja.
Modelo de cuadro predeterminado Modelo de cuadro de cuadro: contenido-box;
BoxWidth = 2*margen + 2*borde + 2*relleno + widthboxheight = 2*margen + 2*borde + 2*relleno + altura
Cuando no aparece barra de desplazamiento
cuerpo {margen: 0;}#demo {ancho: 100px; Altura: 100px; relleno: 10px; borde: 20px; margen: 30px; Color de fondo: rojo;} <div id = "demo"> 123456789 123456789 </div>ClientWidth: Devuelve el ancho visible del contenido en la página (excluyendo bordes, márgenes o barras de desplazamiento)
ClientHeight: Devuelve la altura visible del contenido en la página (excluyendo bordes, márgenes o barras de desplazamiento)
ClientWidth = 2*Padding + Width - ScrollBarWidth Console.log (document.getElementById ('demo'). ClientWidth); // 120 en este momento ScrollBarWidth = 0ClientHeight = 2*Padding + Height - ScrollBarHeight Console.log (document.getElementById ('demo'). ClientHeight); // 120 en este momento ScrollBarWidth = 0OffsetWidth: Devuelve el ancho del elemento, incluido el borde y el relleno, pero no incluye márgenes
Offsetheight: Devuelve la altura del elemento, incluidos los bordes y los rellenos, pero no incluye márgenes
offsetWidth = 2*borde + 2*relleno + width console.log (document.getElementById ('demo'). offsetWidth) // 160OffSetHeTeight = 2*borde + 2*relleno + altura console.log (document.getElementByid ('demo').OffsetLeft: obtiene la posición izquierda calculada del objeto en relación con el diseño o la coordenada principal especificada por la propiedad OffsetLeft
Offsettop: Obtiene la posición superior calculada del objeto en relación con el diseño o la coordenada principal especificada por la propiedad Offsettop
console.log (document.getElementById ('demo'). offsetleft) //30console.log(document.getElementByid('demo').Offsettop) // 30Cuando aparece una barra de desplazamiento
cuerpo {margen: 0; relleno: 20px; Ancho: 1000px; Altura: 500px;} <div id = "demo"> 123456789123456789 </div>Ancho de desplazamiento: Devuelve todo el ancho del elemento (incluidos los lugares ocultos con barras de desplazamiento)
Scrollheight: Devuelve la altura de todo el elemento (incluidos los lugares ocultos con barras de desplazamiento)
ScrollWidth = 2*Padding + Width Console.log (document.body.scrollwidth) // 1040ScrollHeight = 2*Padding + Width Console.log (document.body.scrollheight) // 540
Scrolltop: la altura del contenido oculto del elemento al deslizar hacia abajo en el bloque de desplazamiento. Cuando no está configurado, el valor predeterminado es 0, y su valor cambia a medida que el bloque de desplazamiento se desplaza
Scrollleft: el ancho del elemento contenido oculto al deslizar el bloque de desplazamiento hacia la derecha. Cuando no está configurado, el valor predeterminado es 0, y su valor cambia a medida que el bloque de desplazamiento se desplaza
objeto de evento
El objeto de evento representa el estado de un evento, como el elemento en el que ocurre el evento, el estado de la tecla de teclado, la posición del mouse y el estado del botón del mouse.
Event.Pagex: En relación con las coordenadas de toda la página, la esquina superior izquierda de la página es la distancia horizontal desde el origen de la coordenada hasta el punto donde se encuentra el mouse (es decir, no lo admite)
Event.Pagey: En relación con las coordenadas de toda la página, la esquina superior izquierda de la página es la distancia vertical desde el origen de la coordenada hasta el punto donde se encuentra el mouse (no compatible con IE8)
Event.Clientx: Las coordenadas del área visual relativa, utilizando la esquina superior izquierda del área visual del navegador como la distancia horizontal desde el origen de las coordenadas hasta el punto donde se encuentra el ratón, utilizando la esquina superior izquierda del área visual del navegador como la distancia horizontal desde el origen de las coordenadas hasta
evento. Clienty: las coordenadas del área visual relativa, utilizando la esquina superior izquierda del área visual del navegador como la distancia vertical desde el origen de la coordenada hasta el punto donde se encuentra el mouse, utilizando la esquina superior izquierda del área visual del navegador como la distancia vertical desde el origen de la coordenada hasta el punto donde se encuentra el ratón donde se encuentra el ratón.
event.screenx: en relación con las coordenadas de la pantalla de la computadora, la distancia horizontal desde el origen de la coordenada hasta el punto donde se encuentra el mouse, utilizando la esquina superior izquierda de la pantalla como la distancia horizontal desde el punto de origen de la coordenada hasta el punto donde se encuentra el mouse.
Event.Screeny: en relación con las coordenadas de la pantalla de la computadora, la distancia vertical desde el origen de las coordenadas hasta el punto donde se encuentra el mouse, utilizando la esquina superior izquierda de la pantalla como la distancia vertical desde el punto de origen de la coordenada hasta el punto donde se encuentra el mouse
Event.OffSetX: En relación con sus propias coordenadas, la distancia horizontal desde el origen coordinado de la esquina superior izquierda de su propio relleno hasta el punto donde se encuentra el ratón se basa en su distancia horizontal desde el origen de las coordenadas de las coordenadas hasta el punto donde se encuentra el ratón donde se encuentra el ratón
Event.Offsety: en relación con sus propias coordenadas, la distancia horizontal desde el origen coordinado de la esquina superior izquierda de su propio relleno hasta el punto donde se encuentra el mouse se basa en su distancia horizontal desde el origen de la coordenada.
El resumen anterior de los métodos para obtener varias alturas y anchos y posiciones de las páginas web en JavaScript es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que apoye más a Wulin.com.