Стиль

Раз есть возможность использовать синтаксис CSS для получения списка узлов, вполне может появиться желание выполнять операции над их стилями. Именно по этой причине NodeList снабжен несколькими методами, которые могут помочь в выполнении этой работы. Особенно примечательным является метод style класса NodeList, так как он может использоваться и как метод чтения, и как метод записи, – в зависимости от того, передается ли ему второй аргумент. Такое его поведение напоминает функцию dojo.style.

Чтобы освежить в памяти, как работает функция dojo.style, вспомните, что вызов dojo.style(someNode, "margin") вернет значение ширины поля узла DOM, а вызов dojo.style(someNode, "margin", "10px") установит ширину поля равной 10 пикселям.

Манипулирование стилями с помощью NodeList выполняется точно так же, за исключением того, что теперь нет никакой необходимости указывать узел в первом параметре. Как и другие методы класса Node-List, этот метод применяется к каждому узлу в списке:
// вариант на основе функции dojo.style...
var a = [];
/* здесь создается массив с узлами */
// выполнить обход узлов и применить стиль
dojo.forEach(a, function(x) {
dojo.style(x, "margin", "10px");
});
//вариант на основе NodeList...
dojo.query( /* некоторый критерий */ )
.style("margin", "10px");

Объект NodeList также включает методы addClass и removeClass для добавления и удаления классов, которые тоже очень похожи на одноименные функции dojo.addClass и dojo.removeClass.


Таким образом, существует возможность вручную манипулировать свойствами стиля элементов с помощью метода style или явно добавлять и удалять классы с помощью методов addClass и removeClass. Следует заметить, что метод style особенно удобен в случае отсутствия класса, который позволяет добиться желаемого результата, тогда как методы addClass и removeClass удобно применять, когда необходимые классы уже существуют и остается только переключать их. Как и в случае с методом style, синтаксис использования этих методов вполне предсказуем:
dojo.query("span.foo", someDomNode).addClass("foo").removeClass("bar");
dojo.query("#bar").style("color","green");

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
NodeList
Анимация
Аргументы в стиле «функции в виде строк»
Длинный и нестабильный способ
Методы, напоминающие методы массивов

Вернуться в раздел: Dojo / Манипулирование узлами