选择选项 onclick 更改字体系列答案

【问题标题】：Select option onclick change font-family选择选项 onclick 更改字体系列
【发布时间】：2016-12-08 14:00:56
【问题描述】：

我有一个简单的contenteditable，ID 为“editor1”，允许用户输入他们想要的任何文本。我还有一个select 标签，其中包含不同的options，其中每个选项都是不同的字体系列。

我所做的是，当用户单击一个选项时，我调用了一个函数，它将所选文本包装在 span 中并相应地更改其字体系列。不幸的是，它不起作用；有人有可行的解决方案吗？（最好是纯javascript）

HTML：

        <select>
            <option onselect="usecomicsans()" style="font-family: 'Comic Sans MS'">Comic Sans MS</option>
            <option onselect="usearial()" style="font-family: Arial">Arial</option>
        </select>

JS：

        function usecomicsans(){
    {
        var selection= window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.fontFamily = "Comic Sans MS";
        span.appendChild(selectedText);
        selection.insertNode(span)
    }
    }

    function usearial(){
    {
        var selection= window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.fontFamily = "Arial";
        span.appendChild(selectedText);
        selection.insertNode(span);
    }
    }

编辑：我在某处读到，将onclick 与option 一起使用是行不通的；相反，我应该在select 中使用onchange。关于我该如何做这件事的任何想法？

【问题讨论】：

在 js 中，连字符的 CSS 属性需要用驼峰式大小写...例如 font-family 变为 fontFamily - 或者您可以使用 .style['font-family'] 以避免混淆...我假设有开发者工具控制台中没有显示错误
改了，还是不行。和onclick有关吗？
我假设开发者工具控制台中没有错误

标签： javascript html css fonts

【解决方案1】：

我认为这是最简单的方法:)

HTML

<div id="output-text">
  Hello Bros, welcome to the world
</div>
     <select id="input-font" class="input"  onchange="changeFont (this);">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
<br>

Javascript

<script>
    function changeFont(font){
        document.getElementById("output-text").style.fontFamily = font.value;
    }
</script>

【讨论】：

【解决方案2】：

在 Javascript 部分中，有一个函数在 <select> 元素的值更改时运行，该函数会做出相应反应并更改字体。当然，您可以通过将 <option> 值设置为字体名称（在本例中为 Ubuntu 和 Overpass）并将 if 语句更改为简单的 document.body.style.fontFamily = "'"+ff+"', sans-serif"; 来使其更容易。

var ff;

function font() {
  ff = document.getElementById('ff').value;
  if (ff = 'u') {
    document.body.style.fontFamily = "'Ubuntu', sans-serif";
  } else {
    document.body.style.fontFamily = "'Overpass', sans-serif";
  }
}

body {
  background: #121212;
  color: white;
  font-family: 'Overpass', sans-serif;
  max-width: 500px;
  margin: 0.01em auto;
}

select {
  font-family: 'Overpass', sans-serif;
  font-size: 1em;
  background: rgb(30, 30, 30);
  border: none;
  color: #ffffff;
  padding: 4px;
  border-radius: 5px;
  transition: 0.5s;
}

select:hover {
  background-color: rgb(50, 50, 50);
}

option#o {
  font-family: 'Overpass', sans-serif;
}

option#u {
  font-family: 'Ubuntu', sans-serif;
}

.body {
  background: rgb(30, 30, 30);
  border-radius: 10px;
  padding: 7px;
}

body::-webkit-scrollbar {
  width: 1em;
  border-radius: 5px 0px 5px 0px;
}

body::-webkit-scrollbar-track {
  background: #121212;
  border: none;
}

body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-image: -webkit-linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}

<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<br>
<label for='ff'>Choose an option and see how the content changes: </label>
<select id='ff' onchange='font()'>
  <option id='o' value='o'>Overpass</option>
  <option id='u' value='u'>Ubuntu</option>
</select>
<br>
<br>
<div class='body'>
  <span style='font-size:1.1em;background:rgb(30,30,30);'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, quam sit amet bibendum aliquet, nisl lacus mollis dui, eget scelerisque lacus diam in enim. Curabitur lobortis odio sed neque euismod, ac ultrices urna condimentum. Maecenas mauris ex, tincidunt quis feugiat eu, vestibulum quis ligula. Nulla nec nulla rutrum, condimentum metus sit amet, malesuada risus. Proin ultrices condimentum dignissim. Praesent eget ipsum maximus, semper dolor vitae, aliquet justo. Curabitur rutrum, lectus in ultrices consequat, lectus sem commodo ante, non placerat odio augue quis tortor. Nam tincidunt metus in augue tempus, vitae venenatis mauris porta. Donec ligula odio, facilisis vel tortor a, congue suscipit velit.</span>
</div>
<br>

【讨论】：