javascript - 是否可以将字体系列设置为

Question

可以设置font-family一个<option>吗？我试过font-family了，但没有用。这是我的代码：

var fonts = ["Arial", "Helvetica", "Serif", "Cambria"];
for (i = 0; i < fonts.length;i++) {
    var font  = document.createElement("option");
    var fontT = document.createTextNode(fonts[i]);

    document.getElementById ("t-font").appendChild (font);
    font.appendChild (fontT);
    font.style.fontFamily = fonts[i];
}

（演示）

js有什么问题还是用html根本不可能做到这一点？

Answer 1

适用规范中没有任何内容阻止您在选项元素上设置字体系列，但浏览器支持参差不齐。

Answer 2

我认为您应该更改方法（或 HTML 标记），因为该select元素不适合此目的。每个浏览器的行为都不同。我会使用RADIO按钮。像这样：

<div id="choose_font">
</div>
<script>
    var fonts = ["Arial", "Helvetica", "Serif", "Cambria"];
    var container = document.getElementById('choose_font');
    for (i = 0; i < fonts.length;i++) {
        var input = document.createElement('INPUT');
        var label = document.createElement('LABEL');
        input.setAttribute("id","t_"+fonts[i]);
        input.setAttribute("type","radio");
        input.setAttribute("name","t_font");
        label.setAttribute("for","t_"+fonts[i]);
        label.style.fontFamily = fonts[i];
        label.appendChild(document.createTextNode(fonts[i]));
        container.appendChild(input);
        container.appendChild(label);
        container.appendChild(document.createElement('BR'));
    }
</script>

使用适当的 CSS，您可以使它看起来像一个选择。