Vamos primeiro olhar como esse bug ocorre.
A cópia do código é a seguinte:
<style type = "text/css">
#div1 {
Largura: 200px;
Altura: 200px;
Antecedentes: vermelho;
}
</style>
A cópia do código é a seguinte:
<Body>
<div id = "div1">
</div>
</body>
A seguir, o código JavaScript usado para testar, com o objetivo de tornar a div gradualmente gradualmente.
A cópia do código é a seguinte:
<script type = "text/javascript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = odiv.offsetWidth-1+'px';
}, 30);
</script>
O código JavaScript é muito simples, não há problema em executá -lo, e o div que você deseja está gradualmente menor.
Então, como aconteceu esse bug de deslocamento?
Agora, algo mágico acontecerá se movermos o estilo. . .
Adicionamos uma borda de estilo ao div1: 1px sólido #ccccff;
A cópia do código é a seguinte:
<style type = "text/css">
#div1 {
Largura: 200px;
Altura: 200px;
Antecedentes: vermelho;
Border: 1px Solid #CCCFF;
}
</style>
Nesse momento, ao executar o código, descobri que a div estava gradualmente aumentando para a direita. . . Bug de imagem apareceu. . . . É obviamente menos 1, por que isso acontece?
Vamos pensar sobre as características do deslocamento:
Exemplo: DIV Largura: Border 200px 1px. De fato, a largura de deslocamento que ele recebe é de 202px.
Então, vamos falar sobre isso novamente, quando o movimento começou, a largura da div era na verdade 200px, e a largura de deslocamento era 202
Neste momento, odiv.style.width = odiv.offsetWidth-1+'px'; Esta frase é igual a odiv.style.width = 202-1 = 201px; e depois atribua o valor à largura
Quando esta frase é executada novamente, a largura da div é 201px; Nesse caso, o 1PX será adicionado a cada vez e gradualmente se tornará maior. Este é o bug do deslocamento.
Como resolver esse problema?
Na verdade, você não precisa dessaWidth. Usamos largura! ! Escreva uma função para obter diretamente a largura no estilo CSS
Obtenha estilos que não estão entre as linhas:
A cópia do código é a seguinte:
função getStyle (obj, nome) {
if (obj.currentstyle) {
retornar obj.currentStyle [nome];
} outro {
return getComputedStyle (obj, null) [nome];
}
}
Em seguida, modificamos o código original:
A cópia do código é a seguinte:
<script type = "text/javascript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = parseInt (getStyle (ODIV, 'width'))-1+'px';
}, 30);
função getStyle (obj, nome) {
if (obj.currentstyle) {
retornar obj.currentStyle [nome];
} outro {
return getComputedStyle (obj, null) [nome];
}
}
</script>
Dessa forma, não haverá problemas com o programa em execução.