定义和访问HTML元素的costum属性

Question

在Web项目中，必须将与技术业务相关的值附加到特定元素。根据这些值，决策将在客户端进行。这种方法的一大优点是，可能的是，我的情况下的CSS是由其他格式自动生成的（由管理层提供）。

我正在尝试将自己的属性添加到某些CSS类中。我有一个css类，如：

.className{
SomeProp: ThisIsTheValue;
}

在Javascript中，我需要访问此值。我尝试过这样的事情：

myVar.SomeProp
myVar["SomeProp"]

全部返回null。有没有办法可以读到这个值？可以添加我自己的CSS属性吗？

Answer 1

您可以在标准JavaScript中使用getComputedStyle()方法：

Example

var element = document.getElementById('name'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');

您可以随意使用top变量，例如在警报中输出的示例中。

Answer 2

SomeProp不是有效的css媒体资源。使用不同的方法来实现您要完成的任务。

该值可以css的{​​{1}}存储在JSON条评论中。解析css元素的.textContent以将值检索为style对象。

＆＃13;

＆＃13;

javascript

＆＃13;

/*{"className":{"SomeProp": "ThisIsTheValue"}}*/

＆＃13;

＆＃13;

＆＃13;

Answer 3

你不能通过CSS做到这一点。浏览器只会读取它知道的CSS属性而忽略其余的CSS属性。您无法以任何实际方式从JavaScript中读取它们。 而且你不应该，因为CSS用于样式，而不是用于业务逻辑。

但是，您可以使用自定义HTML属性。使用data*-attributes，您可以在HTML元素中存储额外信息，并从JavaScript中读取它以您喜欢的任何方式使用它。 Mozilla在这个问题上有一些good documentation。