Question

我有一个测试，可以通过带有Javascript和CSS的combobox更改文本样式。但是，我只是发现该网站中的字体类型发生了变化，而我却没有从Google得到任何帮助。这是我的代码：

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>

我要像这样This (Photo) 我每次从组合框更改样式时，样式文本都会更改，但是我找不到该示例的制作方法以及代码中的问题是什么。请帮助我解决此代码:(，谢谢。

注意：这是我照片的翻译 -ini文字berubah sesuai css =此文字根据css更改 -tebal =粗体 -Miring =斜体 -bingkai =框架

Answer 1

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

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>

Answer 2

如果您要附加一堆样式，我建议您改用className。

因此，例如，您可以在脚本标签中添加：

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

Answer 3

为什么不尝试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 个答案: