通过js更改css文件时丢失样式

Question

我有一个这样的页面

所以我试图在单击按钮时通过 js 更改 CSS

这是我的js代码

this.document.getElementById('style-bandle').setAttribute('href','./assets/demo/default/base/style.bundle.rtl.css');

所以当我点击按钮时，CSS 文件发生了变化，但是在加载新文件 CSS 之前，我会丢失样式

CSS加载后页面返回第一张带样式的图片，如何避免这种加载样式？

Answer 1

如果您使用的是AngulerJS，您可以简单地使用它并从页面控制器更改链接标签的href：

<link rel="stylesheet" data-ng-if="filePath " data-ng-href="{{ filePath }}" />

ng-if 属性之所以存在，是因为需要执行脚本才能在“filePath”变量中有一个值，同时我们隐藏了<link>。您也可以尝试为 href 设置一个默认值。

然后，对于您的按钮，您可以使用ng-click 属性而不是onclick 来调用控制器中的函数。

控制器中的代码应如下所示：

myModule.controller('myController', ['$scope', function($scope) {
   $scope.filePath = 'pathToYourDefaultCSS.css';
   $scope.changeToDark = function() {
       $scope.filePath = './assets/demo/default/base/style.bundle.rtl.css';
   }
}]);