На сайте есть карусель картинок, для создания которой используется плагин 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 { /*...*/ }' );