javascript - 在 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 属性

理论上，当存在浏览器支持时，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，但不是将十六进制代码附加到类名，而是将十六进制值存储在元素的数据属性中，从而使类名在所有实例中保持一致那个元素。

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/