我有一个使用 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 回答
胡子哥哥
TA贡献1825条经验 获得超6个赞
我认为为每种字体定义类会更简单。然后将类名放入选项值中。有了这个，如果您需要向文本添加另一种样式（不仅是字体系列，而且您可以向类添加颜色或其他任何内容），它会更加灵活，这是您的案例的示例
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>
撒科打诨
TA贡献1934条经验 获得超2个赞
如果您想附加一堆样式，我建议您使用 className。
例如，在您的脚本标记中您可以添加：
document.getElementById("output-text").className = font.value;
跃然一笑
TA贡献1826条经验 获得超6个赞
为什么不试试 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...
编辑：啊，看来我读错了你的问题。不过您仍然可以使用循环来改变样式！
- 3 回答
- 0 关注
- 85 浏览
添加回答
举报
0/150
提交
取消