У меня есть решение для изменения значения в определенном классе CSS.Но это работает, только если вы держите свой CSS в теге.Если вы просто сохраните ссылку на свой CSS из внешних файлов, напр.
<style src='script.js'></style>
это решение не будет работать.
Если ваш CSS выглядит следующим образом:
<style id='style'>
.foo {
height:50px;
}
</style>
Вы можете изменить значение тега с помощью JS/jQuery.
Я написал функцию, возможно, она не самая лучшая, но она работает.Вы можете улучшить его, если хотите.
function replaceClassProp(cl,prop,val){
if(!cl || !prop || !val){console.error('Wrong function arguments');return false;}
// Select style tag value
var tag = '#style';
var style = $(tag).text();
var str = style;
// Find the class you want to change
var n = str.indexOf('.'+cl);
str = str.substr(n,str.length);
n = str.indexOf('}');
str = str.substr(0,n+1);
var before = str;
// Find specific property
n = str.indexOf(prop);
str = str.substr(n,str.length);
n = str.indexOf(';');
str = str.substr(0,n+1);
// Replace the property with values you selected
var after = before.replace(str,prop+':'+val+';');
style=style.replace(before,after);
// Submit changes
$(tag).text(style);
}
Затем просто измените переменную тега на свой идентификатор тега стиля и выполните exegute:
replaceClassProp('foo','height','50px');
Разница между этим и $ ('. Foo') .css (' высота», '50px');в том, что когда вы делаете это с помощью метода css jQuery, все элементы, имеющие класс .foo, будут иметь видимый стиль = 'height: 50px' в DOM.Если вы сделаете это по-моему, элементы останутся нетронутыми, и единственное, что вы увидите, это class = 'foo'
Преимущества
- Очистить DOM
- Вы можете изменить желаемое свойство без замены всего стиля
Недостатки
- Только внутренний CSS
- У вас естьчтобы найти конкретный тег стиля, который вы хотите отредактировать
Надеюсь, это поможет в любом случае.