我怎样才能创建相似的CSS类

Question

  

可能重复：
  How to dynamically create CSS class in JavaScript and apply?

我想根据用户在文本字段中指定宽度来创建css类。我知道我可以使用内联样式来实现它，但我想避免它，因为有许多属性需要处理。在这个问题＆＃34;宽度＆＃34;只是一个例子。

例如：如果用户指定宽度为＆＃34; 20＆＃34;那我想要 -

.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规则。

我的观点：使用最好的软件设计，你永远不需要这样做。