W3C、ECMAScript或专业人士建议在JavaScript中向现有HTML类添加属性？

我有一个问题，询问是否可以命名一个媒体查询。到目前为止，这个问题还没有得到回答

因此，现在我考虑在JavaScript的媒体查询中添加一个

name

属性

我的问题是，是否有任何建议或理由不将我自己的自定义属性添加到对象上

有一项政策规定，不要提出有争议的问题或类似的问题，但这个问题是基于最佳实践和W3C建议的。这是一个合理的问题，我会解释原因

人们将自己的自定义属性添加到HTML标记中，最终W3C对此提出了建议，“如果您想使用自己的属性，请在属性名称中添加破折号”

因此，在这个问题领域有一段历史

那么，对于在现有类中添加您自己的属性，有什么建议吗？或者您对此有什么优点和缺点吗？

我清楚地知道，有一天类可能会向类添加同名的属性，或者有一天类对象可能不是动态的

另一个例子是，我在选择列表中有一个选项列表，我想向其中添加对数据对象的引用。现在，HTML列表选项有一个属性

我想添加对相关对象的引用

var list = document.getElementById("sizesList");

for (var i=0; i<sizeOptions.length; i++) {
  let option = document.createElement("option");
  let sizeOption = sizeOptions[i];
  let name = sizeOption.name;
  option.data = sizeOption;
  option.value = name;
  option.innerHTML = name;
  list.appendChild(option);
}

var list=document.getElementById（“SizeList”）；
对于（var i=0；iW3C有这样的说法：

自定义数据属性用于存储页面或应用程序专用的自定义数据，没有更合适的属性或元素

因此，是的，只要您使用为元素提供的工具，就可以在元素上存储任意数据


W3C有这样的说法：

此模块引入一系列自定义作者定义的属性，统称为自定义属性，允许作者使用作者选择的名称为属性指定任意值，以及var（）函数，该函数允许作者使用文档中其他属性中的这些值。这使得读取大型文件变得更容易，因为看似任意的值现在具有信息性名称，并且使编辑此类文件变得更容易，更不容易出错，因为只需在自定义属性中更改一次值，然后更改将自动传播到该变量的所有用途

因此，CSS变量旨在使样式设置更加方便，但不用于存储任意数据。（尽管这并不妨碍您这样做。如果您可以将数据编码为字符串，则可以将其分配给CSS变量。）


据我所知，
@media
并不是一个真正的集合，它更像是CSS的一个
if/then
块。CSS
@media
并没有真正的javascript表现形式

window.matchMedia（）
可以查询当前媒体状态，但返回的对象在每次调用时都会重新生成，并且不会与CSS中任何特定的
@media
关联

document.styleSheets
与样式表集合绑定，本质上是文本文档，而不是某种CSS对象结构

虽然您可以在每个
@media
中设置
：root
，每个
@media
部分的特定变量的值不同，仅用于检测哪个变量处于活动状态，但这似乎是一个等待发生的维护问题。
您如何将
名称
属性添加到媒体q确实是这样吗？我相信JavaScripts中的对象是动态类。这意味着，在JavaScript中获得对它的引用后，只需将其设置为，
mediaQuery.name=“Query1”即可向其添加属性；
。如果在JavaScript中可能的话，我想我可以扩展我想添加属性的类。这不是W3策略，但肯定是专业人士：@Bergi good findI现在正在使用：root做类似的事情。我在顶级全局类中有一组自定义CSS变量，所以在每个媒体查询中添加：root可能就行了。我可以n将名称作为属性添加到媒体规则（请参阅图片发布）中（原因同样是页面是短期的），或使用字典将名称映射到查询中。阅读后，会给出足够的提醒，以避免将属性添加到对象中。
.class {
   --my-css-variable-name: "my css value";
}

var list = document.getElementById("sizesList");

for (var i=0; i<sizeOptions.length; i++) {
  let option = document.createElement("option");
  let sizeOption = sizeOptions[i];
  let name = sizeOption.name;
  option.data = sizeOption;
  option.value = name;
  option.innerHTML = name;
  list.appendChild(option);
}