Primero veamos cómo ocurre este error.
La copia del código es la siguiente:
<style type = "text/css">
#Div1 {
Ancho: 200px;
Altura: 200px;
Antecedentes: rojo;
}
</style>
La copia del código es la siguiente:
<Body>
<div id = "div1">
</div>
</body>
El siguiente es el código JavaScript utilizado para probar, con el propósito de hacer que el Div se estreche gradualmente.
La copia del código es la siguiente:
<script type = "text/javaScript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = odiv.offsetwidth-1+'px';
}, 30);
</script>
El código JavaScript es muy simple, no hay problemas para ejecutarlo, y el DIV que desea se está volviendo más pequeño.
Entonces, ¿cómo surgió este error de compensación?
Ahora, algo mágico sucederá si movemos el estilo. . .
Agregamos un borde de estilo a Div1: 1px Solid #CCCCFFF;
La copia del código es la siguiente:
<style type = "text/css">
#Div1 {
Ancho: 200px;
Altura: 200px;
Antecedentes: rojo;
borde: 1px sólido #ccccff;
}
</style>
En este momento, al ejecutar el código, descubrí que el DIV estaba aumentando gradualmente a la derecha. . . Apareció el error de la imagen. . . . Obviamente es menos 1, ¿por qué sucede esto?
Pensemos en las características de Offset:
Ejemplo: Ancho Div: 200px Border 1px. De hecho, el ancho de compensación que obtiene es 202px.
Entonces, hablemos de eso nuevamente, cuando comenzó el movimiento, el ancho del div era en realidad 200px, y el ancho de compensación era 202
En este momento odiv.style.width = odiv.offsetwidth-1+'px'; Esta oración es igual a odiv.style.width = 202-1 = 201px; y luego asigne el valor al ancho
Cuando esta oración se ejecuta nuevamente, el ancho del DIV es 201px; En este caso, se agregará 1PX cada vez, y gradualmente se hará más grande. Este es el error de Offset.
¿Cómo resolver este problema?
En realidad, no necesitas este OffsetWidth. ¡Usamos ancho! ! Escriba una función para obtener directamente el ancho en el estilo CSS
Obtenga estilos que no se encuentren entre líneas:
La copia del código es la siguiente:
función getStyle (obj, nombre) {
if (obj.currentstyle) {
regresar obj.CurrentStyle [nombre];
} demás {
return getComputedStyle (obj, null) [nombre];
}
}
Luego modificamos el código original:
La copia del código es la siguiente:
<script type = "text/javaScript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = parseInt (getStyle (odiv, 'width'))-1+'px';
}, 30);
función getStyle (obj, nombre) {
if (obj.currentstyle) {
regresar obj.CurrentStyle [nombre];
} demás {
return getComputedStyle (obj, null) [nombre];
}
}
</script>
De esta manera no habrá problemas con el programa en ejecución.