javascript - Using class name in CSS value

Question

I am currently doing some styling and have thought up an interesting way to do something. I want to create a piece of text that stands out among every other bit of text on the page. Below you can see the way I've done this.

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>

Answer 1

CSS attr

Theoretically, this type of thing is what the CSS attr property could be used for when browser support exists. Note that this won't work now, but when browser support does exist, it might look something like this:

HTML

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

CSS

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

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

You can read more about the attr property here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

---

But for now...

Your best bet is probably to continue to use JavaScript, but instead of appending the hex code to the class name, store the hex value in a data attribute of the element, allowing you to keep the class name consistent for all instances of that element.

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;

Here's a JSFiddle for reference: http://jsfiddle.net/galengidman/xx6r1n2o/