如何通過使用JavaScript單擊另一個元素來更改元素的字體？

Question

我正在嘗試創建一個樣式指南生成器，以允許某人選擇他們想要在項目中使用的字體。 它會有一個字體列表供您選擇，然后當他們單擊該字體時，他們希望它會更改h1標簽，以便他們可以預覽所選的字體

Answer 1

這是一個簡單的代碼段，它可以滿足您的需求。

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

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

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

Answer 2

您可以只使用font-family css屬性。

從javascript，您可以這樣設置：

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