Hinzufügen von zufälligen Schriftarten zu jedem Element der Klasse

Question

Sie versucht, es so zu machen, dass jedes Div mit der Klasse .book eine zufällige Schriftart aus einem Array zugewiesen bekommt. Dies ist mein Code so weit

var fonts = ['Gloria Hallelujah', 'Sedgwick Ave', 'Gochi Hand', 'Patrick Hand', 'Kalam', 'Rock Salt', 'Neucha', 'Caveat Brush', 'Schoolbell']; 
var randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
$(".book").style.fontFamily = randomfont; 

Der Fehler Ich erhalte ist: Uncaught TypeError: Cannot set property 'fontFamily' of undefined

Wer weiß, was ich falsch mache?

Answer 1

$(".book") gibt ein jquery-Array zurück. zB zum Einstellen der ersten verwenden Sie:

$(".book")[0].style.fontFamily = 

Sie Schleife müssen durch $(".book") der DOM-Elemente zu erhalten:

$(".book").each(function() { 
    var randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
    this.style.fontFamily = randomfont; 
}); 

(es sei denn Sie sie alle auf die gleiche Schrift zu setzen gemeint, in denen Kofferset randomfont außerhalb der Schleife).

Answer 2

Das liegt daran, dass Sie versuchen, fontFamily direkt auf dem jQuery-Objekt anstelle des DOM-Elements festzulegen.

Entweder jQuerys css Methode verwenden oder get/Gruppenwähler verwenden, um das DOM-Element zurückzuholen.

Auf der anderen Seite, dass auf jedem Element tun wollen, so müssen Sie each wie folgt verwenden: Dies wird dazu beitragen,

//const fonts = ['Gloria Hallelujah', 'Sedgwick Ave', 'Gochi Hand', 'Patrick Hand', 'Kalam', 'Rock Salt', 'Neucha', 'Caveat Brush', 'Schoolbell']; 
 
const fonts = ['Helvetica', 'Arial', 'Verdana', 'Courier', 'Courier New']; 
 

 
$('.book').each(function(item) { 
 
    const randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
 
    this.style.fontFamily = randomfont; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="book">Test 1</div> 
 
<div class="book">Test 2</div> 
 
<div class="book">Test 3</div> 
 
<div class="book">Test 4</div> 
 
<div class="book">Test 5</div> 
 
<div class="book">Test 6</div>

Answer 3

Hoffnung. Rufen Sie einfach die ID mit der document.getElementById('') und legen Sie dann den Schriftgrad.

var fonts = ['Impact,Charcoal,sans-serif', 'Sedgwick Ave', ' Helvetica', 'Patrick Hand', 'Kalam', 'Rock Salt', 'Neucha', 'Caveat Brush', 'Schoolbell']; 
var randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
alert(randomfont); 
var val=document.getElementById("book").style.fontFamily = randomfont;