使用被取代的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覆盖正文css