通过选项下拉列表Javascript更改字体样式

我有一个用Javascript和CSS组合框改变文本样式的测试。但是，我只是在这个网站上发现字体类型发生了变化，我从谷歌那里什么也没有得到。这是我的代码：

var changeFont=函数（字体）{
console.log（font.value）
document.getElementById（“输出文本”）.style.fontFamily=font.value；
}

.tebal{
字体系列：Verdana；
字体大小：12px；
颜色：蓝色；
字体大小：粗体；
}
米林先生{
字体系列：Verdana；
字体大小：12px；
颜色：蓝色；
字体大小：斜体；
}

使用组合框更改了文本样式
大家好
新罗马时代
Arial
阿尔及利亚人
柏林圣FB酒店
泰巴
泥沼
样式1
样式2
样式3

如果您希望附加一系列样式，我建议您使用className

例如，在脚本标记中，您可以添加：

document.getElementById("output-text").className = font.value;

---

你为什么不试试if语句呢？我认为您需要innerHTML

var changeFont = function(font) {
if (font === "tebal") {
document.getElementById("output-text").innerHTML = "You have selected Tebal!";
} else if (font === miring) {
document.getElementById("output-text").innerHTML = "You have selected Miring!";
} else...

---

编辑：啊，看来我看错了你的问题。尽管您仍然可以使用循环来更改样式

我认为为每种字体定义类会更简单。然后将类名放入选项值。这样，如果您需要向文本中添加其他样式（不仅是字体系列，还可以向类中添加颜色或其他任何内容），则会更加灵活 以下是您的案例示例

var changeFont=函数（字体）{
console.log（font.value）
document.getElementById（“输出文本”）.className=“文本中心”+font.value；
}

.bold{
字体系列：Verdana；
字体大小：12px；
颜色：蓝色；
字体大小：粗体；
}
米林先生{
字体系列：Verdana；
字体大小：12px；
颜色：蓝色；
字体：斜体；
}
.Arial{
字体系列：Arial；
}
阿尔及利亚人{
字体家族：阿尔及利亚；
}
.Berlin sans fb{
字体系列：“柏林无fb”；
}
新罗马时报{
字体系列：“新罗马时代”；
}

使用组合框更改了文本样式
大家好
新罗马时代
Arial
阿尔及利亚人
柏林圣FB酒店
泰巴
泥沼
样式1
样式2
样式3