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>事件函数，每次选择标记的选项更改时，该标记会将正文类设置为其中一个字体类。

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

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

请在此处查看完整代码： http://jsfiddle.net/0fvzvtve/

Answer 2

正如我在评论中所说，修改容器元素（在我的示例中为body）上的字体系列（或类）可能要容易得多，而不是为每个字体版本创建重复的CSS样式。

这是我为您快速勾勒出的一个非常简单的例子。它修改了font family的{{1}}属性：

body

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.changeFont = function(){
    document.body.style.fontFamily = $scope.font;
  }
})

类方法 - 它改变了<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="Ctrl"> <select ng-model="font" ng-change="changeFont(this.value)"> <option value="Times New Roman">Font1</option> <option value="Arial">Font2</option> <option value="sans">Font3</option> </select> </div> <p>Some text outside the controller</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et velit id dui dapibus vulputate. Nunc scelerisque orci et tortor congue, vitae feugiat eros bibendum. Nam tincidunt vitae neque nec tempus. Integer tempor gravida tellus bibendum ornare. Nulla facilisi. Etiam sodales feugiat mollis. Mauris vitae sem nibh. Cras id nunc congue, tempus augue sed, tincidunt massa. Praesent sodales libero id facilisis eleifend. Nunc finibus tempus dui. Aenean lacus mi, euismod sed lacus a, semper vulputate massa.</p>的类：

body

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.changeFont = function(){
    document.body.className = $scope.font;
  }
})

.font1 {font-family: Times New Roman}
.font2 {font-family: Arial}
.font3 {font-family: sans}

通过下拉框更改网页字体

2 个答案: