属性值从CSS为Javascript

有一种方法来选择这样的CSS中的某个数据：属性值从CSS为Javascript

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

哪里n - 是td's data-cell属性的开始。

如何在Javascript中使用这个选择器的组合？因为JS会认识到这可能是一个数组，并返回错误。

来源

2015-04-06 Alexandr Belov

你必须要更具体一点，你打算如何在“用”这个选择JavaScript的。但是因为你通常将选择器作为字符串传递，所以我不知道解释器怎么会认为它是一个数组。 – JJJ

我的意思是用于数组[...]的那些括号。无论如何，我需要获得数据单元属性的开始。最简单的方法似乎是这样。 –

-1

所有现代浏览器支持单个元素的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 selectors spec：

[ATT | = VAL]
表示与ATT属性的元素，它的值或者恰好被 “VAL” 或用 “val” 立即一开始，接着“ - ”（U + 002D）。

另外，您可以使用访问DOM元素的数据属性dataset property：

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); 
    } 
});

来源

2015-04-06 20:35:52

谢谢，但你可以在JS中做同样的事情吗？没有JQuery。 –

'^'与'| ='不是一回事。 – JJJ

'querySelectorAll'与ES6,5或任何其他ECMAScript无关。 – dfsq

属性值从CSS为Javascript

回答

相关问题