屬性值從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

回答

相關問題