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

在web项目中，与业务相关的技术值必须附加到特定元素。基于这些价值观，客户方将做出决策。如果可能的话，这种方法的一大优势是，在我的例子中，CSS是从其他格式（由管理层提供）自动生成的

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

.className{
SomeProp: ThisIsTheValue;
}

在Javascript中，我需要访问这个值。我试过这样的方法：

myVar.SomeProp
myVar["SomeProp"]

---

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

您可以在标准JavaScript中使用

getComputedStyle（）

方法：

---

您可以随意使用

top

变量，例如在示例中它在警报中输出。

您可以在标准JavaScript中使用

getComputedStyle（）

方法：

---

您可以随意使用

top

变量，例如在警报中输出的示例中。

SomeProp

不是有效的

css

属性。使用不同的方法来实现你想要实现的目标

---

该值可以作为

JSON

存储在

css

注释中的

css

中。解析

style

元素的

.textContent

，以将值检索为

javascript

对象

/*{“className”：{“SomeProp”：“ThisIsTheValue”}}*/

var styles=document.styleSheets[0]。所有者节点；
var obj=JSON.parse(
styles.textContent
.match（/（\/\*{.*}）（？=\*\/）/）[0]
.替换（/[/*]/g，“”）
.trim（）
);
log（obj[“className”][“SomeProp”]）

SomeProp

不是有效的

css

属性。使用不同的方法来实现你想要实现的目标

---

该值可以作为

JSON

存储在

css

注释中的

css

中。解析

style

元素的

.textContent

，以将值检索为

javascript

对象

/*{“className”：{“SomeProp”：“ThisIsTheValue”}}*/

var styles=document.styleSheets[0]。所有者节点；
var obj=JSON.parse(
styles.textContent
.match（/（\/\*{.*}）（？=\*\/）/）[0]
.替换（/[/*]/g，“”）
.trim（）
);
log（obj[“className”][“SomeProp”]）

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

---

但是，您可以使用自定义HTML属性。使用可以在HTML元素中存储额外的信息，并从JavaScript中读取这些信息，以便以您喜欢的任何方式使用它们。Mozilla对此有一些建议。

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

---

但是，您可以使用自定义HTML属性。使用可以在HTML元素中存储额外的信息，并从JavaScript中读取这些信息，以便以您喜欢的任何方式使用它们。Mozilla对此有一些建议。

SomeProp

不是有效的

css

属性。你想实现什么？你想访问哪个属性我正在为类分配一个自定义属性！那是不允许的吗？不，那是不允许的。为什么要在

css

文件中指定属性？预期结果是什么？我编辑了上面的问题

SomeProp

不是有效的

css

属性。你想实现什么？你想访问哪个属性我正在为类分配一个自定义属性！那是不允许的吗？不，那是不允许的。为什么要在

css

文件中指定属性？预期结果是什么？我编辑了上面的问题。getComputedStyle（）对OP没有帮助。OP正在

css

文件中设置实际属性

SomeProp

，这不是一个有效的

css

属性。@guest271314从OP最初的问题的措辞来看，听起来他想通过Javascript读取css属性的值。在他的编辑之后，我现在看到了他想要达到的目标。Cheers

.getComputedStyle（）

对OP没有帮助。OP正在

css

文件中设置实际属性

SomeProp

，该属性不是有效的

css

属性。@guest271314从OP最初的问题的措辞来看，听起来好像他想通过Javascript读取css属性的值。在他的编辑之后，我现在看到了他想要达到的目标。我正在研究这个解决方案。在我的例子中，它并没有那么优雅，因为前端现在将包含太多的信息。好吧，如果你想在CSS中这样做，这意味着元素也有那个特定的类集。因此，您可以使用检查类的存在性。然后您只需要知道哪些属性属于该类。由于CSS不起作用，您可以选择在某个地方对它们进行硬编码，或者以某种方式将它们作为JavaScript对象或JSON片段传递到页面。尽管如此，除非您有一个非常具体的用例，否则要获得与数据属性相同的结果，这是一种麻烦且非正统的方法。在我的例子中，它并没有那么优雅，因为前端现在将包含太多的信息。好吧，如果你想在CSS中这样做，这意味着元素也有那个特定的类集。因此，您可以使用检查类的存在性。然后您只需要知道哪些属性属于该类。由于CSS不起作用，您可以选择在某个地方对它们进行硬编码，或者以某种方式将它们作为JavaScript对象或JSON片段传递到页面。不过，除非你有一个非常具体的用例，

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