从阵列添加随机值到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，但悬停是某种事情的状态，而不是您可以选择作为查询的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';