воскресенье, 1 декабря 2013 г.

Изменение css-свойств для динамически создаваемых элементов

jQuery с легкостью позволяет изменять css-свойства для существующих на странице элементов с помощью метода .css(). Но все изменения сохраняются в атрибуты style элементов. Поэтому все вновь создаваемые элементы получат старые свойства, прописанные в .css-файлах.
Для того, чтобы все изменения css-свойств применялись и для новых элементов мы поступим следующим образом: создадим элемент style с id и будем вносить в него изменения. Для упрощения этого процесса напишем jquery-плагин:

/**
 * Изменить css-правило внутри style-элемента
 * @param {String} selector Селектор для которого необходимо менять правила
 * @param {String} property Свойство, значение которого надо изменить
 * @param {String} value Новое значение
 */
$.fn.style = function(selector, property, value){
   return $(this).each(function(){
       if( $(this).prop('tagName') !== 'STYLE') return;
       $.each(this.sheet.cssRules, function(i, li){
           if(li.selectorText === selector){
               li.style.setProperty(property, value);
           }
       });
   });
};
Мы выбираем по id style-элемент и начинаем перебирать его селекторы. Как только нашли нужный нам селектор, заменяем для него указанное свойство. Следует заметить, что данный метод требует точного совпадения селекторов, определенных в стилях и селекторов элементов, к которым надо применить изменения.

<style id="style_elem">
    .item{
        background: #eee;
    }
</style>

$('#style_elem').style('.item', 'background', '#ccc');
Теперь все вновь создаваемые элементы с классом item будут иметь background с цветом #ccc. Данный метод работает для всех современных браузерах.