Как постепенно увеличивать оставшееся поле, используя DOM - PullRequest
Новая
       0

Как постепенно увеличивать оставшееся поле, используя DOM

0 голосов
/ 28 июня 2018

У меня есть изображение черного кота Я хочу постепенно увеличивать его ширину, а также заставлять изображение двигаться слева направо, увеличивая его собственный левый край. Я не могу понять, почему ширина увеличивается, а поле слева показывает NaN value.

Здесь HTML: - 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Cat Walk</title>
</head>
<body>
    <img id="cat-gif" style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif">
    <script src="main.js"></script>
</body>

Здесь указана функция для перемещения кота: - 

var catWalk = function() {

var cat = document.getElementById("cat-gif");

cat.setAttribute('width', cat.width+10); //THIS WORKS
cat.setAttribute('marginLeft', cat.marginLeft+10); //THIS DOES NOT WORK!

}

//Call to the function
window.setInterval(catWalk, 500);

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Оставленное поле не является атрибутом, следовательно, оно не работает в вашем случае. это свойство стиля, следовательно, вам нужно сделать это по-другому заменить 

cat.setAttribute('marginLeft', cat.marginLeft+10);

с 

var p = cat.style.marginLeft; // return value in px; i.e 50px
p = p.substr(0,p.length-2); // remove px ie : 50px becomes 50
cat.style.marginLeft = (+p)+ 10 +'px' // convert p to number and add 10
0 голосов
/ 28 июня 2018

попробуйте использовать следующее: 

cat.style.marginLeft = (parseInt((cat.style.marginLeft) || parseInt(window.getComputedStyle(cat).marginLeft))) + 10 + 'px';

вместо cat.setAttribute('marginLeft', cat.marginLeft+10); по умолчанию в вашем элементе отсутствует атрибут marginLeft. Итак, вам нужно получить вычисленные стили и добавить их в свой атрибут стиля, после чего вы сможете получить к нему доступ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...