Javascript 自定义CSS属性，为什么不呢？

我曾希望CSS3将带来定制的CSS属性，这些属性可以被JavaScript读取，并影响元素的行为。像jQuery UI这样的JavaScript库通过JavaScript API传递样式选项，就像ASP.NET控件一样。例如，它应该会困扰那些考虑AOP的严肃开发人员。为什么认为CSS自定义属性没有用处，例如“-ui可调整大小的句柄：e se；”或任何格式。AOP就是CSS的全部，不是吗？

也许不是你的意思，但它确实可以节省大量时间，并提供更多的灵活性

LESS通过动态行为扩展CSS 例如变量、混合、操作 和功能。两条线路上的运行次数都较少 客户端（IE 6+、Webkit、Firefox） 和服务器端，带有Node.js

---

是的，好主意，但我认为有一种更自然的方法来创建增强的CSS样式表：在服务器端用PHP（ASP、JSP等，无论您使用什么）生成CSS，以防HTML。所以，这取决于你，你从什么样的来源生成什么样的CSS

---

所有网页都使用动态生成的HTML页面（在AJAX之前，这是构建应用程序的唯一方法），但使用静态CSS样式。为什么？

您可以借用以任意字符串作为其值的现有属性。想到的是

字体系列

，

计数器重置

和

计数器增量

，或

动画名称

。使用

计数器重置

可以执行以下操作：

CSS

HTML

在代码中实际使用计数器的情况下，这里唯一可能的兼容性问题是CSS规则不必要的副作用。另外，请注意，该值必须符合的CSS定义。如果给一个值加空格，它将被解释为两个不同的计数器，如果用引号括起来，CSS值将被视为无效

使用-webkit语言环境

如果你真的很勇敢，你也可以使用

-webkit locale

。由于它继承并接受单个字符串值，因此无需执行上述大部分操作，包括CSS规则和JS来拆分计算值，并消除了值为CSS“identifer”的限制：

HTML

---

希望在不久的将来，我们将有CSS级联变量，这种黑客行为将不再是必要的。

“影响元素行为”不。想详细说明或指向源吗？不完全是我想要的，但很有趣。我认为这与ern0的建议是一致的，即生成更灵活的CSS，但不能解决让CSS提供超出其固定属性集的样式的问题。我经常认为css伪类像：hover as after thinks和drop-in-a-bucket努力解决更大的问题。IE的CSS“行为”并不是最好的实现，但它可能有一点，即CSS的可扩展性。这并不能回答这个问题。我之前有过这样的想法，它肯定会使生成动态CSS规则变得更容易。这里提出的问题是不同的，我希望有一种分离关注点的方法，这样JS（比如jQuery插件）编码器就不需要在JSAPI中使用样式化命令，比如{height:“fill”}。我明白了。此外，服务器端生成的/JS操纵的CSS是一个常见的“父”神话的“子”：CSS神圣且不可触摸，必须以最终形式编辑和存储。。。虽然我们有1000个用于服务器端HTML构建的模板引擎和600个用于客户端HTML（DOM）操作的JS框架，但很多网站都会动态生成CSS。然而，这并没有解决OP寻找级联自定义CSS属性的方法的需要。+1纯粹是因为我需要将一些功能破解到现有站点中（尽可能少地更改），并且需要根据图像存储一个可单击的url，但使用CSS。我使用了

font-family

，现在负责网站的人可以同时更改图像url和点击url（我刚刚编写了一个脚本，如果图像具有字体系列值，可以使用链接标签包装图像）。才华横溢-谢谢：）

* {counter-reset: inherit;} /* by default, counter-reset does NOT inherit */

<div style="counter-reset: my-value; "> <!-- want to set value here -->
  <p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>

var p_styles = window.getComputedValue(document.getElementById("para"),null);
var p_reset_value = p_styles.counterReset;
var p_myvalue = p_reset_value.split(" ")[0]; /* computed value will be 'my-value 0' */

<div style="-webkit-locale: 'bar foo'; "> <!-- want to set value here -->
  <p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>

var style = window.getComputedValue(document.getElementById("para"),null);
var prop = style.webkitLocale; // "bar foo"