Question

我有一个简单的contenteditable，其中包含id＆＃39; editor1＆＃39;允许用户输入他们想要的任何文本。我还有一个包含不同select的{{1}}标记，其中每个选项都是不同的字体系列。

我做的是，当用户点击一个选项时，我调用了一个函数，该选项将所选文本包装在options中并相应地更改其字体系列。不幸的是它没有用;谁有工作解决方案？（最好是纯粹的javascript）

HTML：

span

JS：

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

编辑：我在某处读到使用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内使用onchange。关于如何做到这一点的任何想法？

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

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

选择选项onclick更改font-family

2 个答案: