Изменение таблицы стилей с помощью javascript - PullRequest
Новая
       4

Изменение таблицы стилей с помощью javascript

2 голосов
/ 02 мая 2020

Я пытаюсь изменить таблицу стилей моей страницы с помощью функции javascript. Сначала это работает, но после двух щелчков мышью переменная, определяющая неактивную таблицу стилей, застревает на «темном» значении.

Я был бы очень признателен, если бы получил поддержку от этого удивительного сообщества. ^^

Здесь у вас есть и страница, и исходный код:

Ссылка: https://jadeblink.netlify.app

HTML

<head>
    <title>JADEblink*</title>
    <link rel="stylesheet" id="pagestyle" href="dark.css">
    <link rel="alternate stylesheet" id="pagestyle" href="light.css">
    <script src="main.js"></script>
</head>
<body>
    <div id="pagetitle">
        JADE<span id="blink">blink*</span>
        <div class="shape" onclick="changeStyle();">Change to<br><span id="xstyle"></span> style<div>
        <script>
            var t=setInterval(function(){document.getElementById("xstyle").innerHTML=otherstyle;},100);
        </script>
    </div>
</body>

JavaScript

var otherstyle="light";
function changeStyle() {
    document.getElementById('pagestyle').setAttribute('href', otherstyle+".css");
    if(otherstyle="dark")
        otherstyle="light";
    if(otherstyle="light")
        otherstyle="dark";
}

1 Ответ

4 голосов
/ 02 мая 2020

Что-то не так в вашей логике c.

Использование if(otherstyle="dark") не сравнит его, так как вам нужно использовать == для сравнения или === для строгого сравнения.

Кроме того, если вы установив его на light, он войдет в ваше следующее if условие, восстановив его до dark, поэтому вам нужно использовать else if для второго условия.

Это должно сработать: 

var otherstyle = "light";

function changeStyle() {
  document.getElementById('pagestyle').setAttribute('href', otherstyle + ".css");
  if (otherstyle == "dark")
    otherstyle = "light";
  else if (otherstyle == "light")
    otherstyle = "dark";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...