Question

我正在尝试创建一个样式指南生成器，允许某人选择他们想要在项目中使用的字体。它会有一个可供选择的字体列表，然后当他们点击他们想要的字体时，它会更改h1标签，以便他们可以预览所选的字体

Answer 1

这是一个简单的代码片段，可以实现我的想法。

＆＃13;

const demo = document.querySelector("h1");

for (const a of document.querySelectorAll(".select-font"))
  a.onclick = () => {
    demo.style.fontFamily = a.style.fontFamily;
  }

＆＃13;

.select-font {
  margin: 10px;
  padding: 10px;
  background-color: silver;
  cursor: pointer;
  display: inline-block;
  width: 100px;
}

h1 {
  margin: 10px;
  padding: 10px;
  background-color: yellow;
}

＆＃13;

<div>Click one of the fonts</div>

<div class="select-font"
  style="font-family: Times New Roman, Times, serif">
Times</div>
<div class="select-font" 
  style="font-family: Arial, Helvetica, sans-serif">
Arial</div>
<div class="select-font" 
  style="font-family: 'Comic Sans MS', cursive, sans-serif">
Comic</div>


<br>
<h1>Demo</h1>

＆＃13;

Answer 2

您可以使用font-family css属性。

从javascript你可以像这样设置：

document.getElementById("preview_element").style.fontFamily = "arial"

如何通过使用JavaScript单击另一个元素来更改元素的字体？

2 个答案: