-1

我有以下代碼，它隨機化數組中的文本。添加隨機排版div元素

但是，我不知道如何做到以下幾點。

在瀏覽器負載而不是onclick上顯示結果。
在負載中顯示輸出到一個div CLASS（所以如果我有多個稱爲「輸出」的div，將在每個div中顯示隨機字體/大小/權重）
它應該從每個div元素並改變類等，而不是使用字體名稱等。
而不是使用數組中的字體名稱，我如何將每個變量指向一個類？ .font1 {font-family：Verdana，Geneva，sans-serif;} .font2 {font-family：Georgia，「Times New Roman」，Times，serif;} .font3 {font-family：「Trebuchet MS 「，Arial，Helvetica，sans-serif;} .font4 {font-family：」Times New Roman「，Times，serif;} .font5 {font-family：」Comic Sans MS「，cursive;} var fonts = ['.font1'，'.font2'，'.font3'，'.font4'，'.font5'];

真的希望有人能幫忙。

代碼如下;

<button onclick="run()">Test</button> 
<div id="output"/> 

var fonts = ['Arial', 'Helvetica', 'Georgia', 'Tahoma', 'Verdana']; 
var weights = ['normal', 'bold', 'lighter']; 
var sizes = ['16px', '20px', '24px', '36px', '40px']; 

var choose = function(arr) { 
return arr[Math.floor(Math.random() * arr.length)]; 
}; 
var output = document.getElementById("output"); 

window.run = function() { 
var text = choose(sizes) + ' ' + choose(weights) + ' ' + choose(fonts); 
output.innerHTML = '<div class="randomFont" style="font: ' + text + '">' + text +  '</div>'; 
}

來源

2012-11-25 user1106295

http://jsfiddle.net/CrossEye/bwsvy/ – user1106295

您可以將事件偵聽器窗口load事件：
```
window.addEventListener('load', run, false); 
```
更重要的是，如果你的目標是支持瀏覽器，你可以使用DOMContentLoaded，不會等待圖片，樣式表和其他不太必要的資源加載：
```
document.addEventListener('DOMContentLoaded', run, false); 
```
您甚至可以使用兩者的組合：附加到兩者，並且在run中，只有在尚未完成時纔可以使用。
您可以使用document.getElementsByClassName找到給定的class的所有元素。然後，您可以遍歷返回的集合，併爲每個集合賦予一個隨機字體。
（和4.）與其構建一些HTML和CSS字符串，您可以改用style屬性來計算權重和大小。例如：
```
element.style.fontWeight = 'bold'; 
```
對於字體，選擇課程之一，並添加一個空格，然後它元素的className屬性：
```
element.className += ' ' + fontFamilyClass; 
```

Try it out.

來源

2012-11-25 21:07:22 icktoofay

你能告訴我一個這個jsfiddle的例子嗎？ – user1106295

也，當我將其更改爲document.getElementsByClassName，它似乎打破？ – user1106295

@ user1106295：我加了一個JSFiddle的例子。 – icktoofay

你是建立風格作爲速記，但你指定他們的順序是錯誤的大小應該在家庭之前。正確的方法是<div style=bold 16px Verdana></div>

這裏是一個工作的例子：如果你想這種事情發生在負載簡單地執行你的HTML中的身體

onLoad事件渲染功能

http://jsfiddle.net/7egCK/2/

<body onLoad="run()">

來源

2012-11-25 21:08:21 Michal

把所有東西都放在'font'中是一個有效的CSS簡寫，儘管我認爲這個命令是錯誤的。 [嘗試。]（http://jsfiddle.net/v8neB/） – icktoofay

這是真的，我永遠不會記住短褲，因爲你必須記住訂單。 :) – Michal

謝謝，但我如何做以下？如果我有相同的類乘法div，我需要在任何te div的文本更改爲隨機字體等，所以我需要將其更改爲clas sinstead div，我還需要更改輸出以讀取什麼在每個div？ – user1106295

添加隨機排版div元素

回答

Try it out.

相關問題