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. Данный метод работает для всех современных браузерах.
Комментариев нет:
Отправить комментарий