通过选项下拉 Javascript 更改字体样式
我有一个使用 Javascript 和 CSS 使用组合框更改文本样式的测试。但是，我只是发现这个网站的字体类型发生了变化，我从谷歌那里什么也没得到。这是我的代码：
var changeFont = function(font) {
console.log(font.value)
document.getElementById("output-text").style.fontFamily = font.value;
}
.tebal {
font-family: Verdana;
font-size: 12px;
color: blue;
font-weight: bold;
}
.miring {
font-family: Verdana;
font-size: 12px;
color: blue;
font-weight: italic;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<div class="jumbotron text-center">
<h3>Text Style Changed with combobox</h3>
</div>
<div class="text-center" id="output-text">
Hello Guys
</div>
<div class="text-center">
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Times New Roman" selected="selected">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="algerian">Algerian</option>
<option value="berlin sans fb">Berlin Sans FB</option>
<option value="bold" class="bold">Tebal</option>
<option value="miring" class="miring">Miring</option>
<option value="" class="">Style1</option>
<option value="" class="">Style2</option>
<option value="" class="">Style3</option>
</select>
</div>
我想让它像这样（照片）， 每次我从组合框更改样式，样式文本都会更改，但我找不到如何制作它的示例以及我的代码有什么问题。请帮我解决这个代码:(，谢谢。
注意：这是我的照片的翻译 - ini 文本 berubah sesuai css = 此文本根据 css 进行更改 - tebal = 粗体 - Miring = 斜体 - bingkai = 框架
狐的传说3回答
-
胡子哥哥
我认为为每种字体定义类会更简单。然后将类名放入选项值中。有了这个，如果您需要向文本添加另一种样式（不仅是字体系列，而且您可以向类添加颜色或其他任何内容），它会更加灵活，这是您的案例的示例var changeFont = function(font) { console.log(font.value) document.getElementById("output-text").className = "text-center " + font.value;}.bold { font-family: Verdana; font-size: 12px; color: blue; font-weight: bold;}.miring { font-family: Verdana; font-size: 12px; color: blue; font-style: italic;}.Arial{ font-family: Arial;}.Algerian{ font-family: Algerian;}.Berlin-sans-fb{ font-family: 'Berlin sans fb';}.Times-new-roman{ font-family: 'Times New Roman';}<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="windows-1252"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script><script src="http://code.jquery.com/jquery-git2.js"></script></head><body> <div class="jumbotron text-center"> <h3>Text Style Changed with combobox</h3> </div> <div class="text-center" id="output-text"> Hello Guys </div> <div class="text-center"> <select id="input-font" class="input" onchange="changeFont (this);"> <option value="Times-new-roman" selected="selected">Times New Roman</option> <option value="Arial">Arial</option> <option value="Algerian">Algerian</option> <option value="Berlin-sans-fb">Berlin Sans FB</option> <option value="bold" class="bold">Tebal</option> <option value="miring" class="miring">Miring</option> <option value="" class="">Style1</option> <option value="" class="">Style2</option> <option value="" class="">Style3</option> </select> </div> -
撒科打诨
如果您想附加一堆样式，我建议您使用 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...编辑：啊，看来我读错了你的问题。不过您仍然可以使用循环来改变样式！
随时随地看视频慕课网APP
相关分类
Html5
