html - 通过下拉框更改网页字体

Question

我想在我的页面上有一个下拉框，当您单击其中一种字体时，它会更改站点字体，

我尝试了下面的代码，但它什么也没做。有什么想法吗？

山姆

CSS

.font1 p { font-family: "Times New Roman", Times, Serif;  }
.font1 h1 { font-family: "Times New Roman", Times, Serif;   }
.font1 h2 { font-family: "Times New Roman", Times, Serif;   }
.font1 h3 { font-family: "Times New Roman", Times, Serif;  }
.font1 h4 { font-family: "Times New Roman", Times, Serif;  }
.font1 h5 { font-family: "Times New Roman", Times, Serif;  }
.font1 h6 { font-family: "Times New Roman", Times, Serif;  }
.font1 th {font-family: "Times New Roman", Times, Serif;  }
.font1 tr {font-family: "Times New Roman", Times, Serif; }

.font2 p { font-family: Arial, Helvetica, sans-serif;  }
.font2 h1 { font-family: Arial, Helvetica, sans-serif;   }
.font2 h2 { font-family: Arial, Helvetica, sans-serif;   }
.font2 h3 { font-family: Arial, Helvetica, sans-serif;  }
.font2 h4 { font-family: Arial, Helvetica, sans-serif;  }
.font2 h5 { font-family: Arial, Helvetica, sans-serif;  }
.font2 h6 { font-family: Arial, Helvetica, sans-serif;  }
.font2 th {font-family: Arial, Helvetica, sans-serif;  }
.font2 tr {font-family: Arial, Helvetica, sans-serif; }
</style>

HTML

<div>
      <select>
        <option value="Choose a font">Choose a Font</option>
        <option value="Font1" ng-click="font1">Font1</option>
        <option value="Font2" ng-click="font2">Font2</option>
        <option value="Font3" ng-click="font3">Font3</option>
        <option value="Font4" ng-click="font4">Font4</option>
      </select>
      </div>

Answer 1

您需要添加一个 onchange <select> 的事件函数每次 select 标签的选项更改时，将正文类设置为字体类之一的标签。

var fontChooser = document.getElementById ('fontChooser');

fontChooser.onchange = function () {
    document.body.className = this.value;
};

完整代码请看这里: http://jsfiddle.net/0fvzvtve/