Раз есть возможность использовать синтаксис 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");