Динамическое создание и изменение таблицы стилей CSS через JavaScript и Jquery

На сайте есть карусель картинок, для создания которой используется плагин jcarusel. Картинки из портфолио подгружаются в эту карусель или динамически или статически через php. Проблема была в том, что ширина места под картинки задается в таблице стилей CSS, а подгружаемые картинки разной ширины. Если задавать через jquery ширину классу, в котором задан размер ширины, до применения обертывания функцией jcarusel, то эффекта никакого не будет, т.к. данный класс присваивается не напрямую элементам, а внутри плагина. А если задавать после, то карусель начинает работать неправильно и расширяться в высоту. Следовательно нужно изменять ширину динамически в таблице стилей CSS для данного класса. Поискав в интернете нашел решение:


var head = document.getElementsByTagName('head')[0];
// создаем таблицу стилей с css стилями
// и возвращаем ссылку на нее
function addStyleSheet( css ) {
var sheet = document.createElement( 'style' );
sheet.type = 'text/css';
head.appendChild( sheet );
if( sheet.styleSheet )
sheet.styleSheet.cssText = css;
else
sheet.appendChild( document.createTextNode(css) );
return sheet;
}

// Заменяем таблицу стилей новыми css стилями 
// (текстовой строкой)
function changeStyleSheet( sheet, css ) {
if( sheet.styleSheet )
sheet.styleSheet.cssText = css;
else
sheet.replaceChild(
document.createTextNode(css), sheet.firstChild );
return sheet;
}

// Пример - добавляем пустую таблицу стилей и, затем,
// заменяем ее новыми стилями
var sheet = addStyleSheet( '' );
changeStyleSheet( sheet,
'#test-id { /*...*/ } .test-class { /*...*/ }' );


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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>