用于字体转换器的JavaScript

Question

有没有人知道制作简单字体更换器所需的JavaScript？ 我想在页面上有一个小的弹出窗口，当你选择一个字体时，它会改变另一个页面上所有文本区域的字体。我希望它能够更改页面上已经存在的文本，但它不需要。谢谢！

Answer 1

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

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

然后，创建一个可以触发事件的选择或其他内容。我们将类名放在选项的值参数中：

<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/

如果目标元素除了字体之外还需要其他类，则需要确保删除字体类（通过循环选择的所有选项并检查目标元素是否具有任何这些类并删除然后添加课程（所以className += " " + this.value而不仅仅是className = this.value），但你说的很简单，所以......;）