compensar la diferencia entre el estilo y
offset puede ser cualquier valor de estilo de hojas de estilo
valor de la serie de compensación de ninguna unidad
offsetWidth incluyen frontera + ancho + acolchado
offsetWidth otros atributos son de sólo lectura atributo, sólo puede conseguir, no se puede asignar
por lo que queremos obtener el tamaño del elemento La posición es más adecuada con el
estilo de
estilo offset que solo puede obtener el
ancho de estilo de hoja de estilo en línea obtenido es una cadena con unidades
style.width no incluye el valor de relleno y estilo de borde. El
ancho es una propiedad legible, se puede obtener o asignar
La diferencia entre la sintaxis de puntos y los elementos de adquisición de desplazamiento
: Características de sintaxis: 1. Puede obtener atributos estándar en línea (principal)
2. Puede adquirir atributos agregados dinámicamente por gramática
3. No puede adquirir atributos personalizados en línea
4. No puede adquirir atributos de
adquisición en línea de atributos : 1 Puede obtener los atributos dentro y fuera de la fila
2. Obtener el valor del atributo es tipo de número y sin unidades
3. Obtener el ancho y la altura verdaderos de los elementos que se muestran en la página (ancho / alto + relleno + borde)
La diferencia entre las tres familias (resumen de las tres familias)
1.2.1 Ancho y alto
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = ancho de contenido (excluyendo el borde) ancho + padding
scrollHeight = altura del contenido (excluyendo borde)
1.2.2
desplazamiento superior e izquierdo Superior / desplazamiento Izquierda:
llamador: cualquier elemento.
Función (basada en recuadros) : la distancia desde el recuadro principal con posicionamiento.
scrollTop / scrollLeft: (También se puede llamar al cuadro, debe haber una barra de desplazamiento)
Llamador: document.body.scrollTop / ..... (ventana)
Función: la parte que el navegador no puede mostrar (la parte que está enrollada)
clientY / clientX: (el valor clientTop / clientLeft es border)
llamador: event.clientX (event)
rol: la distancia del mouse desde el área visible del navegador (izquierda y arriba).
// ancho y alto
// desplazamiento con borde
// desplazamiento sin borde, contenido ancho y alto
// cliente sin borde
// arriba y a la izquierda
// la distancia entre el desplazamiento y el cuadro con el posicionamiento del cuadro padre
// la distancia de la parte
desplazada // el ancho y la altura del borde del cliente
// clientX y clientY
// llamada de evento, la distancia desde el mouse hasta el área visible del navegador
Uso especial de la familia del cliente: verifique el ancho / alto del navegador (área visible)
El evento Onresize
activará este evento cada vez que cambie el tamaño del navegador, incluso 1 píxel. Distinción del
resumen del evento
:
1.window.onscroll deslizando la pantalla
2.window.onresize cambio de tamaño del navegador
3.window.onload se completa la carga de la página
4.div.onmousemove mueve el mouse sobre el cuadro
(nota: ¡no se mueve el cuadro!)
5. onmouseup / onmousedown == onclick para obtener el ancho y la altura de la pantalla
window.screen.width
resolution es la precisión de la imagen de la pantalla, se refiere a cuántos píxeles puede mostrar el monitor.
Nuestra computadora es generalmente: 1280 píxeles en la dirección horizontal y 960 píxeles en la dirección vertical.
Cuando vemos películas, es pantalla completa y media pantalla, eso es todo.
familia offset: obtiene el ancho y la altura verdaderos del elemento
console.log (box.offsetWidth);
console.log (box.offsetHeight);
familia scroll: scrollWidth, scrollHeight, scrollLeft, scrollTop El
rol es: scrollWidth, scrollHeight para obtener el ancho del contenido del elemento Alto (IE8)
scrollLeft, scrollTop para obtener la posición verdadera del contenido del elemento
console.log (box.scrollWidth);
console.log (box.scrollHeight);
console.log (box.scrollLeft);
console.log (box.scrollTop);
scroll Evento de desplazamiento de barra: desplazamiento