Question

在<div>中，白色文本默认情况下具有“文本阴影”。单击文本时，其颜色设置为#627CA9。我希望更新“文本阴影”以匹配相同的颜色。

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

我想添加：

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

我不知道是否可以直接在javascript中完成此操作。我想要一些帮助。

先谢谢您。对不起，我的英语。

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

只需使阴影使用conditionalPanel，它将自动选择currentColor内部定义的颜色

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>

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;
}

Answer 2

这可以通过如下设置元素textShadow对象的style字段来实现：

    element.style.textShadow = "0 0 15px #627CA9";

要在多次单击后产生“交替”阴影的出现，阴影的消失，行为，请确保重置textShadow样式：

    if(shouldShadow) {
        element.style.textShadow = "0 0 15px #627CA9";
    } 
    else {
        element.style.textShadow = ""; /* Remove shadow */
    }

对于您的代码，这将满足您的要求：

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

<script>
  function changeColor(id) {
  var element = document.getElementById(id);
  
  if (element.style.color != "rgb(255, 255, 255)") {
    element.style.color = "#FFFFFF";
    
    /* Reset shadow */
    element.style.textShadow = "";
  }
  else {
  
    /* Color shared for text and shadow */
    const color = "#627CA9";
  
    element.style.color = color;
        
    /* Set shadow matching color */
    element.style.textShadow = `
        0 0 1px ${color}, 
        0 0 2px ${color}, 
        0 0 4px ${color}`;
  }

}

<div style="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;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

Answer 3

add this in css file 

   .forecolor_shadow{
        text-shadow: 0 0 1px #627CA9, 0 0 2px #627CA9, 0 0 4px #627CA9; 
        color:#FFFFFF;
    }

    .white_shadow{
        text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF; 
        color:#627CA9;
    }

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


and add this in js file 

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

      if (x.classList.contains('white_shadow')){
          x.classList.remove("white_shadow");
          x.classList.add("forecolor_shadow");

      } else {
          x.classList.remove("forecolor_shadow");
          x.classList.add("white_shadow");
      }
    }

// this is the html code 

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

javascript-使用<text-shadow>效果更改文本颜色

3 个答案: