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

除了其他一些事情之外，你的选择器是错误的：

您正在寻找我在 HTML 中看不到的#menu。
您需要使用querySelectorAll来获取多个元素。
您的选择器也会查找: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';

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

2 个答案: