Изменить таблицу стилей CSS, когда установлен флажок - PullRequest
Новая
       2

Изменить таблицу стилей CSS, когда установлен флажок

0 голосов
/ 22 октября 2019

Я пытался создать флажок в HTML, который изменяет текущую таблицу стилей на другую, используя JS.

Стиль не изменился после того, как я установил флажок. Вот сообщение об ошибке, которое я получил: Сообщение об ошибке

Вот код, который я написал:

HTML: 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Normal Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="pageStyle" rel="stylesheet" href="style.css">
    <script>
        function swapStyleSheet(sheet) {

        if (document.getElementById("lightSwitch").checked == true) {

        document.getElementById("pageStyle").set.Attribute('href', sheet) = "dark.css";

            } 
        else {

        document.getElementById("pageStyle").set.Attribute('href', sheet) = "style.css";

            }
        }
    </script>
</head>
<body>

        <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">

</body>

Спасибо за разъяснение этой проблемы для меня.

Ответы [ 3 ]

0 голосов
/ 22 октября 2019

Вы делаете это неправильно:

Это ваш код (объяснено) 

<script>
    function swapStyleSheet(sheet) {
// This is expecting a parameter (the stylesheet you want, I suppose)

    if (document.getElementById("lightSwitch").checked == true) {

    document.getElementById("pageStyle").set.Attribute('href', sheet) = "dark.css"; //Here you are, first, invoking a function (wrong function because it's setAttribute and not set.Attribute) and then assigning it a value "dark.css"

        } 
    else {

    document.getElementById("pageStyle").set.Attribute('href', sheet) = "style.css";
//Same here

        }
    }
</script>

Ваш код должен выглядеть примерно так (есть несколько способов присоединить слушатели событий, но этоследует той же структуре, что и вы): 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Normal Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="pageStyle" rel="stylesheet" href="style.css">
    <script>
        function swapStyleSheet(sheet) {

        if (document.getElementById("lightSwitch").getAttribute('checked') === true) {

        document.getElementById("pageStyle").setAttribute('href', "dark.css");

            } 
        else {

        document.getElementById("pageStyle").setAttribute('href', "style.css");

            }
        }
    </script>
</head>
<body>
        <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">

</body>
0 голосов
/ 22 октября 2019

.set.Attribute не является допустимым JavaScript. Используйте .setAttribute. Также вы не можете установить свои атрибуты и затем назначить их в той же строке .set.Attribute('href', sheet) = "dark.css". И вы используете параметр в своей функции JavaScript function swapStyleSheet(sheet), но ничего не делаете с ним при вызове своей функции onclick="swapStyleSheet()".

Поскольку файлы .css не передаются, пути нетчтобы проверить это. Но попробуйте изменить свой код следующим образом: 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Normal Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="pageStyle" rel="stylesheet" href="style.css">
     <script>
        function swapStyleSheet() {

        if (document.getElementById("lightSwitch").checked == true) {

        document.getElementById("pageStyle").setAttribute('href', "dark.css");

            } 
        else {

        document.getElementById("pageStyle").setAttribute('href', "style.css");

            }
        }
    </script>
</head>
<body>

        <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">

</body>

Я очистил ваши методы атрибутов и удалил ненужный параметр. Надеюсь, это поможет вам в правильном направлении.

0 голосов
/ 22 октября 2019

Я думаю, что это должно быть что-то вроде: 

...
<script>
function swapStyleSheet() {
    if (document.getElementById("lightSwitch").checked) {
        document.getElementById("pageStyle").setAttribute('href', 'dark.css');
    } else {
        document.getElementById("pageStyle").setAttribute('href', "style.css");
        }
    }
</script>
</head>
<body>
    <input onclick="swapStyleSheet()" id="lightSwitch" type="checkbox" name="lightSwitch">
</body>

swapStyleSheet не получает никаких атрибутов, так как вы вызываете его без атрибутов onclick="swapStyleSheet()".

setAttribute - метод, который получает 2атрибутов. Вы не можете присвоить результат метода, как вы сделали здесь Attribute('href', sheet) = "style.css";

В противном случае выглядит хорошо (хотя не проверял его).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...