在CSS值中使用類別名稱

Question

我目前正在做一些造型，並且已經想出一種有趣的方式來做某事。 我想創建一段文本，使其在頁面上的所有其他文本中脫穎而出。 在下面，您可以看到我執行此操作的方式。

 var el = document.querySelectorAll('span[class^=impact]')[0], col = el.className.split('-')[1]; el.style.textShadow = '2px 2px 0 #' + col; 

 html, body { width: 100%; height: 100%; margin: 0; background-image: url('http://i.imgur.com/UxB7TDq.jpg'); } [class^=impact] { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Impact, sans-serif; font-size: 72pt; font-weight: 800; text-transform: uppercase; } 

 <span class="impact-008080">impact</span> 

如您所見，我基本上是在學習該類的前半部分並為其應用樣式，然后在JavaScript中獲取該類的后半部分，然后應用陰影。 我要做的是完全省略JavaScript，並將其全部保留在CSS中。

我沒有顏色清單。 顯然支持所有十六進制顏色。 我希望保留這種格式。

Answer 1

CSS attr

從理論上講，這種類型的東西就是當存在瀏覽器支持時CSS attr屬性可以用於的東西。 請注意，這現在將不起作用，但是當確實存在瀏覽器支持時，它可能看起來像這樣：

HTML

<span class="impact" data-shadow="#008080">Impact</span>

CSS

.impact {
    /* you text and positioning styles here */

    text-shadow: 2px 2px attr(data-shadow);
}

您可以在此處閱讀有關attr屬性的更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/attr

---

但現在...

最好的選擇是繼續使用JavaScript，但不要將十六進制代碼附加到類名稱中，而是將十六進制值存儲在元素的data屬性中，從而使該名稱對於該元素的所有實例保持一致。

HTML

<span class="impact" data-shadow="#fff">Impact</span>

CSS

.impact {
    /* your text and position styles here */
}

JS

var el = document.querySelector(".impact"),
    shadow = el.dataset.shadow;

el.style.textShadow = '2px 2px ' + shadow;

這是供參考的JSFiddle： http : //jsfiddle.net/galengidman/xx6r1n2o/