Question

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

所以我的文字“hello folks” 我想更改font-family font1或font2（或font3）

但我无法想象一个正确的方法，我真的很困惑，无论是通过CSS类还是通过javascript referenc来定义样式。任何人都可以帮助我吗？

 <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;

}

但我想我在这里完全错了

Answer 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

Answer 2

由于您没有发布changefont()功能，我无法看到您在代码中尝试了什么...在您的问题中

Change Font by Option Dropdown Javascript

您可以使用和创建一个元素，并更改其字体大小，如

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

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

有关从下拉列表中选择值的详细信息，请参阅here

Answer 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>

Answer 4

您需要对您的选择进行重组（使用value=""标记中的<option>将字体名称传递给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;   
}

通过Option Dropdown Javascript更改字体

4 个答案: