Как я могу создать так классы CSS

Question

Можно создать дубликат:
How to dynamically create CSS class in JavaScript and apply?

Я хочу создать классы CSS в зависимости от того, что пользователь указал ширину в текстовое поле. Я знаю, что могу сделать это, используя встроенные стили, но я хочу избежать этого, так как есть много свойств, о которых нужно позаботиться. В этом вопросе «ширина» является всего лишь примером.

Для например: если пользователь задает ширину, как "20", то я хочу -

.w20 {width:20px} 

если пользователь указывает 21, то я хочу

.w21 {width:21px} 

и так далее ...

FIDDLE

Спасибо.

Answer 1

Вы можете использовать document.stylesheets, чтобы динамически добавлять правила css непосредственно в таблицы стилей.

styleSheet = document.styleSheets[0]; 
// check for undefined could make sense here 
styleSheet.addRule(selector, style); 

insertRule Doc
addRule Doc

или создать новый стиль-элемент

var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML = '.class { rules }'; 
document.getElementsByTagName('head')[0].appendChild(style); 

Answer 2

Вы можете попробовать использовать document.stylesheets добавить CSS динамически ваших таблиц стилей.

styleSheet = document.styleSheets[0]; 
styleSheet.addRule(selector, style); 

Вы также можете использовать встроенные стили (id рекомендует этот подход).

Вы можете изменить ширину элемента с помощью JavaScript, подобного этому.

elem.style.width = "100px"; 

И с помощью JQuery

$("#selector").css("width", "100px"); 

Answer 3

См here наклониться, как добавлять правила CSS во время выполнения.

Мое мнение: с лучшим дизайном программного обеспечения вам никогда не понадобится это делать.