Как изменить НАЗАД с помощью onchange с помощью переключателя в HTML

Я пишу веб-сайт и хочу создать темный/светлый режим. У меня есть переключатель, который переключается при нажатии, и он успешно меняется на мою вторую таблицу стилей css. Как мне переключиться НАЗАД на исходную таблицу стилей?

HTML-

<link id = "pagestyle" rel = "stylesheet" type = "text/css" href = "assets/css/main.css">
<script>
  function swapStyleSheet(sheet) {
    document.getElementById('pagestyle').setAttribute('href', 'assets/css/main2.css');
  }
</script>
<!-- Rectangular switch -->
<label class = "switch">
  <input type = "checkbox" onchange = "swapStyleSheet()"">
    <span class = " slider"></span>
</label>

Использование этого стиля переключения

Возможный дубликат Изменение javascript таблицы стилей

— 31.05.2019 06:51

javascript html css

31.05.2019 06:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

570

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Слушайте флажок. Проверяется он или нет. Вы можете попробовать этот код. Это должно работать.

<link id = "pagestyle" rel = "stylesheet" type = "text/css" href = "assets/css/main.css">
<script>
  function swapStyleSheet(sheet) {
    if (document.getElementById("myCheck").checked){
     document.getElementById('pagestyle').setAttribute('href', 'assets/css/main2.css');
    }else{
      document.getElementById('pagestyle').setAttribute('href', 'assets/css/default.css');
    }
  }
</script>
<!-- Rectangular switch -->
<label class = "switch">
  <input type = "checkbox" id = "myCheck" onchange = "swapStyleSheet()"">
    <span class = " slider"></span>
</label>

31.05.2019 07:10

Ответ принят как подходящий

Пожалуйста, используйте этот код, я надеюсь, что он будет полезен для вас.

 <link id = "pagestyle" rel = "stylesheet" type = "text/css" href = "main.css">
<script>
  function swapStyleSheet(sheet) {
    if ($(sheet).prop("checked") == true){
       document.getElementById('pagestyle').setAttribute('href', 'main2.css');
    }else{
        document.getElementById('pagestyle').setAttribute('href', 'main.css');
    }

  }
</script>

<!-- Rectangular switch -->
<label class = "switch">
  <input type = "checkbox" onchange = "swapStyleSheet(this)">
    <span class = "slider"></span>
</label>

31.05.2019 07:12

<link id = "pagestyle" rel = "stylesheet" type = "text/css" href = "assets/css/main.css">
<script>
  function swapStyleSheet(sheet) {
    switch(document.getElementById("myCheck").checked) {
    case true:
    document.getElementById('pagestyle').setAttribute('href', 'assets/css/main2.css');
    break;
    default:
    document.getElementById('pagestyle').setAttribute('href', 'assets/css/default.css');
}
</script>
<!-- Rectangular switch -->
<label class = "switch">
  <input type = "checkbox" id = "myCheck" onchange = "swapStyleSheet()"">
    <span class = " slider"></span>
</label>

ваш код выдаст ошибку. Вы получите синтаксическую ошибку.

— 31.05.2019 07:23

31.05.2019 07:19

Просто используйте свойство .href, оно намного короче, чем .setAttribute(). Функционирующую демонстрацию можно просмотреть здесь

<!DOCTYPE html>
<html>

<head>
  <link href = "default.css" rel = "stylesheet">
</head>

<body>

  <input id='switch' type = "checkbox">

  <script>
     document.querySelector('#switch').onchange = swap;

function swap(e) {
  document.querySelector('link').href = this.checked ? 'alt.css' : 'default.css';
}
  </script>
</body>

</html>

31.05.2019 07:26

Другие вопросы по теме

Стилизация столбцов разной ширины в одной строке Bootstrap

Несколько вложенных элементов внутри div с фиксированной высотой

Как исправить отсутствие переменной, отображаемой в запросе PHP Post?

Макет с 2 столбцами и 2 строками

Ввод ввода, вызывающий изменение ссылки

Компонент Z-Index of Material Dropdown не размещается под фиксированным div при открытии

Сделать дочерний контейнер фиксированным относительно родительского div (с нефиксированной высотой)

Использование столбцов css для сетки изображений, иногда изображения складываются

Как генерировать случайные непересекающиеся полигоны без свободных пространств

Поверните строку таблицы в макете сетки CSS независимо от других строк

Как изменить НАЗАД с помощью onchange с помощью переключателя в HTML

Ответы 4

Другие вопросы по теме

Похожие вопросы