對CSS中的數據屬性（例如模數）進行計算（計算）

Question

我剛剛了解到可以使用數據屬性來選擇元素，這很棒。 然后，我想根據某些計算方式對這些元素進行不同的樣式設置。 例如，我想擁有4種樣式，並且我想使用元素的現有[data-pid]屬性的模數來幫助確定樣式。

例如，假設有一組包含文本的div，該文本具有四種字體顏色（例如，紅色，橙色，黃色或綠色）中的一種，並且單個div的顏色取決於其四次模數。 我相信CSS（如果可能的話）會像這樣：

div[0=data-pid-modulus-by-4]{
  color: red;
}

div[1=data-pid-modulus-by-4]{
  color: orange;
}

div[2=data-pid-modulus-by-4]{
  color: yellow;
}

div[3=data-pid-modulus-by-4]{
  color: green;
}

是否可以僅使用CSS來計算數據pid /屬性的模數，其方式類似於我上面說明的方式，還是必須使用JavaScript來完成屬性值的模數計算？ 如果不可能，有人可以建議他們想到的最小/最簡單的js解決方案嗎？

謝謝！

Answer 1

這是一個簡單的JavaScript解決方案：

 var pids = document.querySelectorAll('[data-pid]'); Array.prototype.forEach.call(pids, function(elem, index) { elem.classList.add('pid-mod-' + (index % 4)); }); 

 .pid-mod-0 { color: red; } .pid-mod-1 { color: orange; } .pid-mod-2 { color: yellow; } .pid-mod-3 { color: green; } 

 <div data-pid="0">0</div> <div data-pid="1">1</div> <div data-pid="2">2</div> <div data-pid="3">3</div> <div data-pid="4">4</div> <div data-pid="5">5</div> <div data-pid="6">6</div> <div data-pid="7">7</div> 

---

如果所有元素都是彼此的兄弟姐妹，則可以將:nth-of-type()或:nth-child()與范圍一起使用。

 div[data-pid]:nth-of-type(4n+1){ color: red; } div[data-pid]:nth-of-type(4n+2){ color: orange; } div[data-pid]:nth-of-type(4n+3){ color: yellow; } div[data-pid]:nth-of-type(4n+4){ color: green; } 

 <div class="only-pids-in-here"> <div data-pid="0">0</div> <div data-pid="1">1</div> <div data-pid="2">2</div> <div data-pid="3">3</div> <div data-pid="4">4</div> <div data-pid="5">5</div> <div data-pid="6">6</div> <div data-pid="7">7</div> </div> 

Answer 2

您不能直接在CSS中或SASS / LESS中計算值。

為此，您必須使用Javascript。

完全可行，因為即使在CSS中計算html中的html部分，這也是很糟糕的做法。

Answer 3

您不能使用選擇器中的屬性選擇器的值執行算術計算。 屬性值始終是字符串，並且最多僅支持子字符串匹配。

Answer 4

有attr但是

attr（）函數可以與任何CSS屬性一起使用，但是對內容以外的屬性的支持是試驗性的。

從理論上講，您應該能夠

div[data-color] {
    color: attr(data-color, 'color');
}

但是似乎沒有任何支持。

我在想，也許您可​​以將其與calc結合使用，但是calc也不支持模數，因此，實際上您無法使用CSS屬性從pid計算顏色。

我覺得你不走運。 您應該使用所使用的任何模板語言來計算pid-> color，應該同樣容易。