javascript - 如何创建类似的 CSS 类

Question

可能重复：
如何在 JavaScript 中动态创建 CSS 类并应用？

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

例如：如果用户将宽度指定为“20”，那么我想要 -

.w20 {width:20px}

如果用户指定 21 那么我想要

.w21 {width:21px}

等等...

小提琴

谢谢。

Answer 1

您可以使用document.stylesheets将 css 规则直接动态添加到样式表中。

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

insertRule 文档
addRule 文档

或创建一个新的样式元素

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

请参阅此处了解如何在运行时添加 css 规则。

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