javascript - 字体转换器的JavaScript

有谁知道制作简单字体更改器所需的JavaScript？
我想在页面上有一个小的弹出窗口，当您选择一种字体时，它会更改另一页面上所有文本区域的字体。我希望它可以更改页面上已经存在的文本，但是不必更改。谢谢！

最佳答案

最简单的方法是定义多个类，每个类都有字体。

.arial { font-family: Arial; }
.times { font-family: "Times New Roman"; }

然后，创建一个选择或可以触发事件的东西。我们将类名放在选项的value参数中：

<select id="font-changer">
    <option value="arial">Arial</option>
    <option value="times">Times</option>
</select>

然后，添加一个事件以将您要定位的任何元素的类更改为预定义的类名称。在这种情况下，我们假设我们要更改主体：

document.getElementById('font-changer').addEventListener('change', function() {
    document.body.className = this.value;
});

就是这样。这是一个简单的JSFiddle，它以ID为“ target”的段落元素为目标：http://jsfiddle.net/48dh9/

如果目标元素除字体之外还需要其他类，则需要确保删除字体类（可通过遍历select的所有选项并检查目标元素是否具有这些类中的任何一个并删除它们来实现），并然后添加类（所以className += " " + this.value而不只是className = this.value），但是您说的很简单，所以...;）