我想在我的页面上有一个下拉框,当您单击其中一种字体时,它会更改站点字体,
我尝试了下面的代码,但它什么也没做。有什么想法吗?
山姆
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>
最佳答案
您需要添加一个 onchange
<select>
的事件函数每次 select 标签的选项更改时,将正文类设置为字体类之一的标签。
var fontChooser = document.getElementById ('fontChooser');
fontChooser.onchange = function () {
document.body.className = this.value;
};
完整代码请看这里: http://jsfiddle.net/0fvzvtve/
关于html - 通过下拉框更改网页字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31849936/