javascript - 使用被取代的 Javascript 更改字体

Question

我确信这是一个非常简单的问题，但我正在尝试使用 javascript 程序更改 div 框的字体。我设法做到了这一点，但是当我在我的整个站点中实现它时，它被我的 .body css 中设置的字体所取代

我尝试了一些解决方案都无济于事

    <p><input id="sampleFont1" placeholder="Top text..." oninput="this.className = ''" name="Totext"></p>
    <p><input id="sampleFont2" placeholder="Bottom text..." oninput="this.className = ''" name="Bottotext"></p>

      <select name="Font" onchange="myFunction(this);" size="5" style="height: 500px;">
        <option>Georgia</option>
        <option>Palatino Linotype</option>
        <option>Book Antiqua</option>
        <option>Times New Roman</option>
        <option>Arial</option>
        <option>Helvetica</option>
        <option>Arial Black</option>
        <option>Impact</option>
        <option>Lucida Sans Unicode</option>
        <option>Tahoma</option>
        <option>Verdana</option>
        <option>Courier New</option>
        <option>Lucida Console</option>
      </select>

      <script type="text/javascript">

        function myFunction(selectTag) {
        var listValue = selectTag.options[selectTag.selectedIndex].text;
        document.getElementById("sampleFont1").style.fontFamily = listValue;
        document.getElementById("sampleFont2").style.fontFamily = listValue;
      }

      </script>

在这个例子中，它确实改变了字体，但是当我将它附加到我的完整网站时，字体改变被取代了。

Answer 1

例如:在 CSS font-family: "Times New Roman", Times, serif !important;

在 JS 中:document.getElementById("demo").style.setProperty("font-family", "Times New Roman", "important");

使用CSS !important覆盖 body CSS