通过选项下拉 Javascript 更改字体答案

【问题标题】：Change Font by Option Dropdown Javascript通过选项下拉 Javascript 更改字体
【发布时间】：2014-12-16 15:37:41
【问题描述】：

我正在尝试使用选项选择器更改 div 的字体。

所以我有带有文本“你好伙计们”的 div 我想更改字体系列 font1 或 font2 （或 font3）

但我无法想象一个正确的方法，我真的很困惑是通过 css 类还是通过 javascript 引用来定义样式。有人可以帮我吗？

 <div id="output-text">
  hello folks 
</div

  <label for="input-font">
Font
</label>
<br>
<select id="input-font" class="input"  onchange="changeFont (this);" size="2">

  <option selected ="selected"/>
  Helvetica

  <option />
  Arial

</select>
<br>

一个简单的更改字体脚本就是这样，但我无法将它们与该选项下拉列表结合在一起

function changeFont(){
    var userInput = document.getElementById('input-font').value;
    document.getElementById('output_font').innerHTML = userInput;

}

但我想我在这里完全错了

【问题讨论】：

你没有发布你的changeFont函数。
stackoverflow.com/questions/5195303/…
添加您编写的函数 (changeFont())。另外，附带说明一下，您可能希望使用 helvetica 和 arial 以外的其他选项作为您的选项进行测试 - 您可能看不出太大的区别。
您的 HTML 格式存在问题

标签： javascript html css option

【解决方案1】：

这是您的示例已清理并正常工作。

<div id="output-text">
  hello folks 
</div>

<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>
</select>

JavaScript

var changeFont = function(font){
  console.log(font.value)
    document.getElementById("output-text").style.fontFamily = font.value;
}

现在您可以在 HTML 的下拉列表中添加尽可能多的字体，它会起作用.. 这里的工作示例：

JSFIDDLE

【讨论】：

【解决方案2】：

由于您没有发布 changefont() 函数，所以我看不到您在代码中尝试了什么......就像您的问题一样

Change Font by Option Dropdown Javascript

你可以用 and 创建一个元素，然后改变它的字体大小

    document.getElementById("theid").style.fontFamily = "Arial";

您可以使用selectedIndex 属性从下拉列表中获取选定的值。

有关从下拉列表中选择值的更多信息，请参见 here

【讨论】：

我想@user2607713 也想知道如何获取“Arial”部分——即如何使用下拉列表中的选中项。
我无法理解改变字体的原理，如是的……但是您不知道如何使用更多选项来更改它，例如有一个下拉列表：-arial，-comic sans，-…………（对不起，我是新手，所以我只是现在完全搞不懂怎么算1+1了……
您不需要使用选定的索引。解决方案要简单得多，请在下面查看我的答案。

【解决方案3】：

这可能会有所帮助

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <script type="text/javascript">
    function changeFont(str){
        document.getElementById("output-text").setAttribute("style", "font-family:"+str+";");
    }
    </script>
    <div id="output-text">
      hello folks 
    </div>

    <label for="input-font">
    Font
    </label>
    <br>
    <select id="input-font" class="input"  onchange="changeFont(this.value);">
      <option value="Georgia" selected ="selected">Georgia</option>
      <option value="Arial" >Arial</option>
    </select>
    </body>
    </html>

【讨论】：

【解决方案4】：

您需要稍微调整您的选择（在<option> 标签中使用value="" 将字体名称传递给javascript - 您的<option> 标签也需要一些工作才能正确格式化HTML），然后定义changeFont() 函数。 JSFIDDLE DEOM

<select id="input-font" class="input"  onchange="changeFont()" size="2">
  <option selected ="selected" value="Helvetica">Helvetica</option>
  <option value="Arial">Arial</option>
  <option value="Times">Times</option>
</select>

function changeFont() {
    var myselect = document.getElementById("input-font");   //get the input element and store in variable 'myselect'
    var font = myselect.options[myselect.selectedIndex].value;   //store the value="" of the selected element in variable 'font'
    document.getElementById("output-text").style.fontFamily = font;   //set 'output-text' element's font-family style to value in 'font' variable
}

带有备用字体的替代 changeFont() 函数

function changeFont() {
    var myselect = document.getElementById("input-font");  
    var font = myselect.options[myselect.selectedIndex].value;
    font = font + ", sans-serif";  //gives the font variable a backup font in-case the system lacks the selected font
    document.getElementById("output-text").style.fontFamily = font;   
}

【讨论】：