从元素属性动态创建css规则[重复]答案

【问题标题】：Create css rules dynamically from element attributes [duplicate]从元素属性动态创建css规则[重复]
【发布时间】：2014-10-21 05:21:12
【问题描述】：

浏览了 SASS/LESS 文档，但找不到任何我想要的东西。我正在开发一个 AngularJS 应用程序，它具有大量动态的预定义样式（想想 CMS）。

是否可以使用 CSS3/LESS/SASS/Anything 从元素属性动态创建 CSS 规则 - 在浏览器中？

我知道我可以做内嵌样式，但我不太习惯 - 一定有更好的方法！

来自以下 HTML

<div id="el" animation-time="3"></div>

创建以下 css：
#el { transition: 3s linear all; }

我在网上看到了以下用法的一些例子，所以我寄予厚望：

#container {
   min-width: 600px;
   width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

【问题讨论】：

所以您对内联样式不满意，但您对 font-size="32" 完全没问题？
@BoltClock 内联样式感觉就像我回到了 1995 年 ;) 我完全理解代码量是相同的，但我计划做一些 CSS 动画等。所以 LENGTH 作为一个变量属性将是完美的。
@PeterRader - 最佳实践是否是同谋单独讨论；）
您似乎误将<font> 标记的内联样式属性。后者可以追溯到 1995 年。前者直到 '96/'97 才出现，直到 2000 年代初 CSS 开始流行时，几乎没有人使用它。无论哪种方式，我都不相信你的论点 - 如果感觉如此陈旧，你为什么还要尝试复制它？
我真的不得不在这里质疑为什么这甚至是必要的。怎么可能只有一个特定的实例需要一种特殊的样式？在标记中放置样式信息会导致维护噩梦。无论是内联 CSS、字体标签，还是看起来和闻起来都像但不完全是字体标签的东西。

【解决方案1】：

你可以这样创建一个列表：

*[font-size="0pt"] {font-size:0pt}
*[font-size="1pt"] {font-size:1pt}
*[font-size="2pt"] {font-size:2pt} ...

作者给 cmets 的说明：

【讨论】：

【解决方案2】：

您必须识别 HTMLNode。所以这可能有效：

<div id="foobar" animation-time="3s"></div>

与

 div#foobar{
   transition-duration: expression(foobar.getAttribute('animation-time'));
 }

【讨论】：