如何获取或 console.log @keyframes css 动画的颜色？

Question

我的想法是我希望在鼠标悬停后改变文本的颜色。当我将鼠标悬停在文本上时，文本颜色将是我的“光标”的当前颜色。

光标示例：

#cursor{
  position: absolute;
  top: 4.6%;
  left: 6.5%;
  width: 30px;
  height: 30px;
  background:  #000000 ;
  border:none;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: 0.2s;
  z-index: -1;
}

#cursor {
  animation: color-change 10s infinite;
}
  
@keyframes color-change {
  0% { background: rgb(0, 0, 0); }
  10% { background: red; }
  20% { background: rgb(255, 81, 0); }
  30% { background: rgb(255, 238, 0); }
  40% { background: rgb(136, 255, 0); }
  50% { background: rgb(0, 255, 21); }
  60% { background: rgb(0, 255, 179); }
  70% { background: rgb(0, 119, 255); }
  80% { background: rgb(76, 0, 255); }
  90% { background: rgb(255, 0, 170); }
  100% { background: rgb(255, 0, 85); }
}

<div id="cursor"></div>
<script type="text/javascript">
  var cursor = document.getElementById('cursor');
  document.addEventListener('mousemove' , function(e) {
      var x = e.clientX;
      var y = e.clientY;
      cursor.style.left =  x + "px";
      cursor.style.top = y + "px";
  });
</script>

如何获得@keyframes CSS 动画的颜色？

Answer 1

您可以使用 getComputedStyle 和 getPropertyValue 来获取 cursor color 同时在 eventListener 中悬停 (mouseover)，然后使用 event.target 设置悬停元素的背景颜色。我使用第二个事件处理程序将悬停颜色设置回event.target 上的默认背景颜色。例如，参见代码片段。

var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x + "px";
  cursor.style.top = y + "px";
});

const target = document.getElementById("targetEl")

function changeBg(e) {
  // check type of event
  if (e.type === 'mouseover') {
    // get computed style of cursor on mouseover
    let compStyle = getComputedStyle(document.getElementById('cursor'))
    // get computed property background-color
    let cursorColor = compStyle.getPropertyValue('background-color')
    // set e.target to background-color of 
    e.target.style.backgroundColor = cursorColor
  }
  // reset background of text back to default on mouseout
  if (e.type === 'mouseout') {
    // get computed style of root HTML which holds
    // the CSS variable that the elements bg is set to
    let targetBg = getComputedStyle(document.documentElement)
    // get property
    let targetBgColor = targetBg.getPropertyValue('--default-bg');
    // set target back to default bg color
    e.target.style.backgroundColor = targetBgColor
  }
}

document.body.addEventListener('mouseover', changeBg)
target.addEventListener('mouseout', changeBg)

:root {
  --default-bg: transparent;
}

#cursor {
  position: absolute;
  top: 4.6%;
  left: 6.5%;
  width: 30px;
  height: 30px;
  background: #000000;
  border: none;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: 0.2s;
  z-index: -1;
}

#cursor {
  animation: color-change 10s infinite;
}

@keyframes color-change {
  0% {
    background: rgb(0, 0, 0);
  }
  10% {
    background: red;
  }
  20% {
    background: rgb(255, 81, 0);
  }
  30% {
    background: rgb(255, 238, 0);
  }
  40% {
    background: rgb(136, 255, 0);
  }
  50% {
    background: rgb(0, 255, 21);
  }
  60% {
    background: rgb(0, 255, 179);
  }
  70% {
    background: rgb(0, 119, 255);
  }
  80% {
    background: rgb(76, 0, 255);
  }
  90% {
    background: rgb(255, 0, 170);
  }
  100% {
    background: rgb(255, 0, 85);
  }
}

#targetEl {
  background-color: var(--default-bg);
}

<div id="cursor"></div>
<div id="targetEl">Hover over this text</div>

---

另一种选择：

*** 您可以将 eventListener 放在 document.documentElement 上，然后为您想要的每个元素添加一个特定的类要触发的悬停效果。然后使用条件检查event.target.classList.contains('.specificClass')，这样只有具有该类的元素才会受到mouseover规则的影响。

if (e.target.classList.contains('hoverable')) {
  e.target.style.backgroundColor = cursorColor
}

// and 

document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)

编辑：我通过使用类更改了悬停元素的样式。基本上，我们使用event.target 获得computedStyle 和property。我们仍然使用条件来检查 mouseover/mouseout 并且在 mouseout 事件上，我们切换 样式化我们的可悬停元素的类，因为我们想要它的样式。然后在 mouseout 我们移除这个类。这允许您使用 CSS 而不是 JS添加/删除多种样式。关键是使用带有变量的:root -> document.documentElement，我们最初通过设置CSS变量将元素的颜色设置为其默认颜色。然后我们使用 JS 更改 CSS 变量，然后在我们的 CSS 中，当我们引用该变量来设置悬停元素的样式时，它会自动更改。

if (e.target.classList.contains('hoverable')) {
  e.target.style.backgroundColor = cursorColor
}

// and 

document.documentElement.addEventListener('mouseover', changeBg)
document.documentElement.addEventListener('mouseout', changeBg)

var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x + "px";
  cursor.style.top = y + "px";
});

const target = document.getElementById("targetEl")

function changeBg(e) {
  if (e.target.classList.contains('hoverable')) {
    // check type of event
    if (e.type === 'mouseover') {

      // get computed style of cursor on mouseover
      let compStyle = getComputedStyle(document.getElementById('cursor'))
      // get computed property background-color
      let cursorColor = compStyle.getPropertyValue('background-color')
      // we use a root css variable to handle the property
      // change by setting the root variable to the bg color
      document.documentElement.style.setProperty('--default-color', cursorColor)
      // add the class that handles the styling on hover 
      e.target.classList.add('hovered')
    }
    // reset background of text back to default on mouseout
    if (e.type === 'mouseout') {
      // remove the styled class from our element in the DOM
      e.target.classList.remove('hovered')
    }
  }
}

document.body.addEventListener('mouseover', changeBg)
document.body.addEventListener('mouseout', changeBg)

:root {
  --default-bg: transparent;
  --default-color: black;
}

#cursor {
  position: absolute;
  top: 4.6%;
  left: 6.5%;
  width: 30px;
  height: 30px;
  background: #000000;
  border: none;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: 0.2s;
  z-index: -1;
  animation: color-change 10s infinite;
}

@keyframes color-change {
  0% {
    background: rgb(0, 0, 0);
  }
  10% {
    background: red;
  }
  20% {
    background: rgb(255, 81, 0);
  }
  30% {
    background: rgb(255, 238, 0);
  }
  40% {
    background: rgb(136, 255, 0);
  }
  50% {
    background: rgb(0, 255, 21);
  }
  60% {
    background: rgb(0, 255, 179);
  }
  70% {
    background: rgb(0, 119, 255);
  }
  80% {
    background: rgb(76, 0, 255);
  }
  90% {
    background: rgb(255, 0, 170);
  }
  100% {
    background: rgb(255, 0, 85);
  }
}

body > * {
  transition: color .5s;
}

.hovered {
  color: var(--default-color);
}

#targetEl {
  background-color: var(--default-bg);
  transition: color .5s;
}

<div id="cursor"></div>
<div id="targetEl" class="hoverable">Hover over this text</div>
<div>This element will not change as it does not contain the <i>hoverable</i> class</div>
<h2 class="hoverable">This h2 tag contains the class hoverable!</h2>