javascript - 从 CSS 到 Javascript 的属性值

Question

有一种方法可以像这样在 CSS 中选择某个数据:

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

其中 n - 是 td 的数据单元 属性的开始。

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

Answer 1

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

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

或

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

querySelectorAll has nothing to do with ES6, 5, or any other ECMAScript. - dfsq

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

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

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

^ is not the same thing as |= - Juhana

我完全同意。这条线让我失望了......

Where n - is a beginning of td's data-cell attribute. - Alexandr Belov

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

来自 w3 css selectors spec :

[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D).

---

或者，您可以使用 dataset property 访问 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);
    }
});