Try it out.

Question

我有以下代码，用于随机化数组中的文本。

但是我不确定如何做以下事情。

在浏览器加载时显示结果，而不是onclick。
在加载时显示输出到div CLASS（因此，如果我有多个div称为“output”，则每个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”，草书;} 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>';
}

Answer 1

您可以将事件监听器附加到窗口load事件：
```
window.addEventListener('load', run, false);
```
更好的是，如果您定位的浏览器支持它，您可以使用DOMContentLoaded，它不会等待图片，样式表和其他不太重要的资源加载：
```
document.addEventListener('DOMContentLoaded', run, false);
```
你甚至可以使用两者的组合：附加到两者，在run中，只有在尚未完成时才会这样做。
您可以使用document.getElementsByClassName找到给定class的所有元素。然后，您可以迭代返回的集合，并为每个集合提供随机字体。
（和4.）您可以使用style属性作为权重和大小，而不是构建一些HTML和CSS字符串。例如：
```
element.style.fontWeight = 'bold';
```
对于字体系列，选择一个类并添加一个空格，然后将其添加到元素的className属性中：
```
element.className += ' ' + fontFamilyClass;
```

Try it out.

Answer 2

您正在将样式构建为速记，但是您指定它们的顺序错误，大小应该在该系列之前。正确的方法是<div style=bold 16px Verdana></div>

这是一个有效的例子：

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

如果您希望在加载时发生这种情况，只需在Body的onLoad事件中执行html渲染功能

<body onLoad="run()">

将随机排版添加到div元素

2 个答案:

Try it out.