javascript - Change text color with <text-shadow> effect

Question

In <div> the white text has a 'text-shadow' by default. When you click on the text it is in the color style set to #627CA9. I would like it to have the 'text-shadow' updated to match that same color.

text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF; 

I would like to add:

text-shadow: 0 0 1px #627CA9, 0 0 2px #627CA9, 0 0 4px #627CA9; 

I don't know if I can put this done directly in javascript. I would like some help on this.

Thank you in advance. Sorry my English.

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);

  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

Answer 1

Simply make the shadow to use currentColor and it will automatically pick the color defined inside color

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);

  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px currentColor, 0 0 2px currentColor, 0 0 4px currentColor;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}

body {
 background:pink;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

You can also optimize your code with a class toggle:

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);
  x.classList.toggle('color');
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px currentColor, 0 0 2px currentColor, 0 0 4px currentColor;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}
.color {
  color:#627CA9;
}

body {
 background:pink;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>