Question

我想用

<select>

为了更改4个不同段落和标题的字体。这就是我试过的

＆＃13;

var text = document.getElementById("text");
var text2 = document.getElementById("text2");
var text3 = document.getElementById("text3");
var text4 = document.getElementById("text4");


$("#btn_font").on('click', function() {
  var font = document.getElementById("font");
  text.style.fontFamily = String(font);
  text2.style.fontFamily = String(font);
  text3.style.fontFamily = String(font);
  text4.style.fontFamily = String(font);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="font">
  <option value="">Default</option>
  <option value="arial">Arial</option>
  <option value="helvetica">Helvetica</option>
  <option value="times new roman">Times New Roman</option>
  <option value="times">Times</option>
  <option value="courier new">Courier New</option>
  <option value="courier">Courier</option>
  <option value="verdana">Verdana</option>
  <option value="georgia">Georgia</option>
  <option value="palatino">Palatino</option>
  <option value="garamond">Garamond</option>
  <option value="bookman">Bookman</option>
  <option value="comic sans MS">Comic Sans MS</option>
  <option value="trebuchet MS">Trebuchet MS</option>
  <option value="arial black">Arial Black</option>
  <option value="impact">Impact</option>
</select>
<button id="btn_font">Update</button>

＆＃13;

Answer 1

我认为你应该用String(font);或String(font.value);替换font.value;

Answer 2

几个问题

如果您已经拥有jQuery，请使用jQuery，否则添加.value以使脚本正常工作 - 不需要String（）var font = document.getElementById("font").value;
使用.val（）获取jQuery中的值
使用课程
type =“button”

$("#btn_font").on('click', function() {
  var font = $("#font").val();
  $(".text").css({"font-family":font}); // updates all in one line
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="font">
  <option value="">Default</option>
  <option value="arial">Arial</option>
  <option value="helvetica">Helvetica</option>
  <option value="times new roman">Times New Roman</option>
  <option value="times">Times</option>
  <option value="courier new">Courier New</option>
  <option value="courier">Courier</option>
  <option value="verdana">Verdana</option>
  <option value="georgia">Georgia</option>
  <option value="palatino">Palatino</option>
  <option value="garamond">Garamond</option>
  <option value="bookman">Bookman</option>
  <option value="comic sans MS">Comic Sans MS</option>
  <option value="trebuchet MS">Trebuchet MS</option>
  <option value="arial black">Arial Black</option>
  <option value="impact">Impact</option>
</select>
<button type="button" id="btn_font">Update</button>
<div class="text" id="text1">Div 1</div>
<div class="text" id="text2">Div 2</div>
<div class="text" id="text3">Div 3</div>
<div class="text" id="text4">Div 4</div>

Answer 3

您无需将变量 font 转换为字符串。 font是javascript对象，因此您应该使用 .value

获取元素值

var font = document.getElementById("font");
text.style.fontFamily = font.value

使用JS / JQuery和下拉框更改CSS字体

3 个答案: