从CSS到Javascript的属性值

An attribute value from CSS to Javascript

本文关键字：属性 Javascript CSS      更新时间：2023-09-26

有一种方法可以在CSS中选择特定的数据，如下所示：

  td[data-cell|="n"] {
       background-color: red;
       margin-top: 10px;
      ...
     }

其中n-是td's data-cell属性的开头。

如何在Javascript中使用这个选择器的组合？因为JS会将其识别为数组并返回Error。

所有现代浏览器都支持querySelector（）用于单个元素，querySelectorAll（）用于元素数组。传递给这些函数的参数是一个CSS选择器。因此，您的选择器将保持不变。

var firstTD = document.querySelector('td[data-cell|="n"]');

或

var firstTD = document.querySelectorAll('td[data-cell|="n"]')[0];

querySelectorAll与ES6、5或任何其他ECMAScript无关。-dfsq

谢谢你指出这一点。出于某种原因，我认为它依赖于ES6。相反，它是Web API的一部分，它是为现代浏览器本机实现的。

为了向后兼容，您可以使用选择器库，例如jQuery。

var firstTD = $('td[data-cell|="n"]')[0]; // or .eq(0)

^与|=-Juhana 不是一回事

我完全同意。这条线把我甩了…

其中n-是td的数据单元格属性的开头。-Alexandr Belov

由于不知道data-cell的值是什么形式，我不确定他是否想要一个真正的"开始"。要获得一个真正的"开始于"，您需要^=。

来自w3-css选择器规范：

[att|=val]
表示具有att属性的元素，其值要么完全是"val"，要么立即以"val"开头然后是"-"（U+002D）。

或者，您可以使用数据集属性访问DOM元素的数据属性：

document.querySelectorAll('td').forEach(function(obj, idx, arr) {
    // simulate '|=' filter
    if(obj.dataset.cell &&
       (obj.dataset.cell === "n" ||
        obj.dataset.cell.startsWith("n-"))) {
         alert(obj.dataset.cell);
    }
});
相关文章：