Давайте сначала посмотрим, как происходит эта ошибка.
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
#div1 {
Ширина: 200px;
Высота: 200px;
Фон: красный;
}
</style>
Кода -копия выглядит следующим образом:
<тело>
<div id = "div1">
</div>
</body>
Ниже приводится код JavaScript, используемый для тестирования, с целью сделать Div постепенно узким.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
setInterval (function () {
var Odiv = document.getElementById ("div1");
ODIV.Style.width = ODIV.OffSetWidth-1+'px';
}, 30);
</script>
Код JavaScript очень прост, нет проблем с запуском его, и дивизион, который вы хотите, постепенно становится меньше.
Так как же возникла эта ошибка смещения?
Теперь произойдет что -то волшебное, если мы переместим стиль. Полем Полем
Мы добавляем границу стиля в Div1: 1px solid #ccccff;
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
#div1 {
Ширина: 200px;
Высота: 200px;
Фон: красный;
Граница: 1px solid #ccccff;
}
</style>
В настоящее время, при запуске кода, я обнаружил, что DIV постепенно увеличивается вправо. Полем Полем Появилась ошибка изображения. Полем Полем Полем Это, очевидно, минус 1, почему это происходит?
Давайте подумаем о характеристиках смещения:
Пример: Див. Ширина: 200px граница 1px. На самом деле, смещенная сила, которую он получает, составляет 202px.
Итак, давайте снова поговорим об этом, когда движение впервые началось, ширина Div на самом деле была 200 пикселей, а смещенная сила была 202
В это время odiv.style.width = odiv.offsetwidth-1+'px'; Это предложение равно odiv.style.width = 202-1 = 201px; а затем назначьте значение ширине
Когда это предложение снова выполнено, ширина Div составляет 201px; В этом случае 1PX будет добавляться каждый раз, и он постепенно станет больше. Это ошибка смещения.
Как решить эту проблему?
На самом деле, вам не нужна эта смещенная сила. Мы используем ширину! ! Напишите функцию, чтобы напрямую получить ширину в стиле CSS
Получите стили, которые не находятся между линиями:
Кода -копия выглядит следующим образом:
функция getStyle (obj, name) {
if (obj.currentStyle) {
вернуть obj.currentStyle [имя];
} еще {
вернуть getComputedStyle (obj, null) [name];
}
}
Затем мы изменяем исходный код:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
setInterval (function () {
var Odiv = document.getElementById ("div1");
ODIV.Style.width = parseint (getStyle (Odiv, 'width'))-1+'px';
}, 30);
функция getStyle (obj, name) {
if (obj.currentStyle) {
вернуть obj.currentStyle [имя];
} еще {
вернуть getComputedStyle (obj, null) [name];
}
}
</script>
Таким образом, с запуском программы не будет проблем.