Локально определенные стили и анимация в JavaScript

Question

Я изучаю JavaScript, и в тексте говорится, что вы должны использовать локально определенные стили для анимации. т. е. тег стиля HTML. Имеет ли это смысл, и если да, то почему это необходимо? Заранее спасибо.

Answer 1

Они могут относиться к локальному изменению стиля в javascript. Для этого вы используете атрибут стиля каждого элемента.

element.style.width = "100px";

изменит стиль на ширину 100 пикселей. Вот как вы меняете внешний вид элементов с помощью JavaScript.

Answer 2

Нет, в этом нет необходимости.

Вы можете сделать это двумя основными способами.

Динамически изменить стиль:

<p id="myElement">Here is some text to animate</p>
<script>
var pixels = 10; // e.g., if this were a dynamically changing variable
document.getElementById('myElement').style.width = pixels+'px';
</script>

Динамически изменить класс:

<style>
.tiny {width:10px}
</style>
<p id="myElement">Here is some text to animate</p>
<script>
document.getElementById('myElement').className = 'tiny';
</script>

Последний подход, вероятно, является лучшей практикой, поскольку он дает возможность разработчику контролировать все с помощью CSS, в то же время позволяя программисту JavaScript сосредоточиться только на функциональности.

Однако вВ случае переходов, когда вы хотите динамически изменять значения (например, увеличивая ширину на 1 каждую секунду), нецелесообразно определять класс для каждой возможной ширины на этом пути.Однако вы можете запросить саму таблицу стилей, чтобы получить эту информацию.Переменные CSS облегчат это, если они будут реализованы, но в настоящее время вы можете использовать что-то вроде функции getCSSPropertyValue со значением https://gist.github.com/990313, чтобы получить начальное и конечное значения из классов, определенных в таблице стилей, при обработке переходов стиля с помощью стиля.собственность.

var beginWidth = parseInt(getCSSPropertyValue('.small', 'width'));
var endWidth = parseInt(getCSSPropertyValue('.large', 'width'));
var itvl = setInterval(function () {
    if (beginWidth++ > endWidth) {
        clearInterval(itvl);
    }
    document.getElementById('myElement').style.width = beginWidth + 'px';
}, 10);

Answer 3

Возможно, что текст означает, что когда вы что-то делаете, например, вызываете функцию jQuery animate(), например, передавая свойства CSS, эти свойства устанавливаются через атрибут style элемента HTML.Это имеет смысл, поскольку вы хотите, чтобы эти правила переопределяли любые предопределенные правила из таблиц стилей.

Пример: http://jsfiddle.net/jRKJx/

Если вы проверяете <div> после запуска анимации,вы увидите, что jQuery устанавливает атрибут style для элемента.