将数组中的随机值添加到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. 您正在寻找#menu我不能在HTML见。
2. 您需要使用querySelectorAll来获取多个元素。
3. 您的选择器还会寻找:hover ，但是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';
  });
});

Answer 2

document.querySelector('#menu h1 a:hover').style.cssText= 'text-shadow: ' + random_color + '0px 0px 1px, ' + random_color + '0px 0px 1px';