hinzufügen von Array zufälligen Wert auf eine CSS-Eigenschaft

Question

Html-Code:

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

Javascript-Code:

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'; 

Was ich versuche zu tun ist: eine Farbe

(1) erzeugen aus dem Array.

(2) diese Farbe in den Text-Schatten einfügen.

Was passiert ist, dass der Random_colour Wert aus dem Array nicht angezeigt wird. Ich habe das CSS angeschaut und es gibt keine Anzeichen dafür, dass der Text-Schatten angewendet wurde.

Answer 1

Ihre Wähler falsch ist, zusätzlich zu ein paar andere Dinge:

1. Sie suchen #menu, die ich nicht im HTML sehen können. Sie müssen querySelectorAll verwenden, um mehrere Elemente zu erhalten.
2. Ihr Selektor sucht auch nach :hover, aber Hover ist ein Zustand von etwas und nicht etwas, das Sie als eine Abfrage an das DOM auswählen können.

Versuchen Sie diesen Code:

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'; 
}); 

ich ein paar Dinge geändert, um zu verdeutlichen, aber hoffentlich können Sie es an Ihre Bedürfnisse anpassen.

Sie können damit spielen hier: https://jsfiddle.net/fy0893mm/

Außerdem, wenn Sie jedes Element wollen seine eigene zufällige Farbe sein, einfach den Zufallsvariable in die Schleife von Elementen bewegen.

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'; 
}); 

Auch, weil Sie :hover auszuwählen versuchen, es machte mich fragen, ob Sie diese auf schweben des Elements auftreten wollten, wenn ja, diesen Code versuchen, die den entsprechenden Ereignis-Listener zu jedem Artikel angehängt werden kann.

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';