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

标签 html css angularjs

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

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

山姆

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/

相关文章:

javascript - 仅选择一个复选框

html - 单击处理程序不适用于图像

Javascript - 检测表单按钮按下

javascript - 如何注入(inject)一个执行函数的按钮?

css - 为什么我的 DIV 会改变我的光标?

html - CSS3 动画只渲染一帧

javascript - 选择字段中的空白选项

html - 在 Sass 中,我们如何根据宽度值分配高度?

android - Cordova Android4.3 滑动时对元素的弹跳效果

java - Spring MVC(和 angularjs)-检索图像 : high memory usage in Chrome