javascript - 将数组中的随机值添加到 css 属性

Question

HTML代码:

    <h1><a>Minimalist Website</a></h1>
    <h1><a>Fast Food</a></h1>

Javascript 代码:

var colors = ['#000','#111', '#222']; 
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.querySelector('#menu h1 a:hover').style.cssText= 'text-shadow: random_color + 0px 0px 1px, + random_color + 0px 0px 1px';

我想做的是:

(1) 从数组中生成颜色。

(2) 将该颜色放入文本阴影中。

发生的事情是从数组中获取的 random_colour 值没有显示出来。我查看了 CSS，没有应用文本阴影的迹象。

Answer 1

您的选择器是错误的，此外还有一些其他问题:

1. 您正在寻找我在 HTML 中看不到的 #menu。
2. 您需要使用querySelectorAll，来获取多个元素。
3. 您的选择器还会查找 :hover，但悬停是某种状态，而不是您可以选择作为对 DOM 的查询的状态。

试试这段代码:

var colors = ['red','green', 'blue']; 
var random_color = colors[Math.floor(Math.random() * colors.length)];
var items = document.querySelectorAll('h1 a');

items.forEach(item => {
    item.style.cssText = 'text-shadow: ' + random_color + ' 10px 10px 0px';
});

我更改了一些内容以使其更清晰，但希望您可以根据自己的需要进行调整。

你可以在这里玩: https://jsfiddle.net/fy0893mm/

此外，如果您希望每个元素都有自己的随机颜色，只需将随机变量移动到元素循环中即可。

var colors = ['red','green', 'blue']; 
var items = document.querySelectorAll('h1 a');

items.forEach(item => {
    var random_color = colors[Math.floor(Math.random() * colors.length)];
    item.style.cssText = 'text-shadow: ' + random_color + ' 10px 10px 0px';
});

此外，因为您试图选择 :hover，这让我想知道您是否希望在元素悬停时发生这种情况，如果是这样，请尝试此代码，它将附加适当的事件监听器到每个元素。

var colors = ['red','green', 'blue', 'yellow', 'pink', 'orange']; 
var random_color = colors[Math.floor(Math.random() * colors.length)];
var items = document.querySelectorAll('h1 a');

items.forEach(item => {
  item.addEventListener('mouseover', function() {
    item.style.cssText = 'text-shadow: ' + random_color + ' 10px 10px 0px';
  });
  item.addEventListener('mouseout', function() {
    item.style.cssText = 'text-shadow: none';
  });
});