потерять стиль при смене файла CSS cs

Question

У меня есть страница с таким стилем

Поэтому я пытаюсь изменить CSS с помощью js, когда нажимаю на кнопку

Так что этомой код 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';
   }
}]);