Question

我是一名摄影师，对HTML / CSS知之甚少，几乎不了解javascript。我正在尝试建立自己的网站，我希望有一个选项可以在明暗背景之间切换，以便在查看我的照片时获得更好的观看体验。我找到了一个在CSS（浅/暗）之间交换的代码。

HEAD HTML：

<link rel="stylesheet" id="pagestyle" type="text/css" href="CSS/light.css" >
<link rel="alternate stylesheet" tittle="dark" type="text/css" href="CSS/dark.css" >
<script src="scripts/styleswitcher.js" type="text/javascript"></script>

BODY HTML：

<button id="light"> Light </button>
<button id="dark"> Dark </button>

我正在尝试使用here找到的javascript代码。使用Javascript：

var setdark = function () {
        $('#head').append('<link rel="stylesheet" href="CSS/dark.css" type="text/css" />');
    },
    setlight = function () {
        $('link[rel=stylesheet][href="CSS/dark.css type="text/css"]').remove();
    };

$("#light").click(function () {
    localStorage.setItem('color', 'light');
    setlight();
});

$("#dark").click(function () {
    localStorage.setItem('color', 'dark');
    setdark();
});

if (localStorage.getItem('color') == 'light') {
    setlight(); 
} 

else if (localStorage.getItem('color') == 'dark') {
    setdark();
}

我编辑了代码，希望我可以在我的网站上运行它。但它没有用。我做错了什么？

Answer 1

你应该添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

前

<script src="scripts/styleswitcher.js" type="text/javascript"></script>

然后

$(document).ready(function(){
var setdark = function () {
    $('#head').append('<link rel="stylesheet" href="CSS/dark.css" type="text/css" />');
},
setlight = function () {
    $('link[rel=stylesheet][href="CSS/dark.css type="text/css"]').remove();
};

$("#light").click(function () {
    localStorage.setItem('color', 'light');
    setlight();
});

$("#dark").click(function () {
    localStorage.setItem('color', 'dark');
    setdark();
});

if (localStorage.getItem('color') == 'light') {
    setlight(); 
} 

else if (localStorage.getItem('color') == 'dark') {
    setdark();
 }
})

Answer 2

你应该在使用它的插件之前加载jQuery，然后调用它直到dom和jquery准备就绪。

我认为你最好通过Mozilla的js guide。

Answer 3

您需要在项目中包含jQuery。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Your title</title>
  <link rel="stylesheet" id="pagestyle" type="text/css" href="CSS/light.css">
  <link rel="alternate stylesheet" tittle="dark" type="text/css" href="CSS/dark.css">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="scripts/styleswitcher.js" type="text/javascript"></script>
</body>

</html>

将触发切换的javascript

$(function () {
    var setdark = function () {
            $('#head').append('<link rel="stylesheet" href="CSS/dark.css" type="text/css" />');
        },
        setlight = function () {
            $('link[rel=stylesheet][href="CSS/dark.css type="text/css"]').remove();
        };

    $("#light").click(function () {
        localStorage.setItem('color', 'light');
        setlight();
    });

    $("#dark").click(function () {
        localStorage.setItem('color', 'dark');
        setdark();
    });

    if (localStorage.getItem('color') == 'light') {
        setlight();
    } else if (localStorage.getItem('color') == 'dark') {
        setdark();
    }
});

请注意，加载JS文件的顺序非常重要，首先需要加载jQuery，而不是任何其他依赖文件。

以下是文档就绪的简写，它意味着在其他所有内容加载后执行其中的任何内容，以防止DOM在未加载所有内容时出现意外错误

$(function () {

}

Answer 4

如果你想使用普通的JS，我推荐给你而不是直接使用jQuery，试试这种方法。

我评论了每一行，使其更容易理解

  using System.Linq;
  using System.Reflection;
  ...   

  MyClass source = ...

  var sum = source
    .GetType()
    .GetProperties(BindingFlags.Instance |
                   BindingFlags.Public | 
                   BindingFlags.NonPublic) // you may want not to read non-public props
    .Where(p => p.CanRead && p.PropertyType == typeof(int))
    .Sum(p => (int) p.GetValue(source));

// select the button to attach and event to it
var themeTogglerButton = document.querySelector('#themeToggler');

// check if there's a stored theme
var storedTheme = localStorage.getItem['theme'];

// if the theme is dark set the class on the body
if (storedTheme === 'dark') {
  document.body.classList.add('dark');
}

// attach and event when clicking the button
themeTogglerButton.addEventListener('click', function() {
  // the event consists on toggling a class on the body element
  document.body.classList.toggle('dark');

  if (document.body.classList.contains('dark')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.removeItem('theme');
  }
})

/* default style (without dark class) */

body {
  background: white;
}


/* style when body has the 'dark' class */

body.dark {
  background: black;
}

swap stylesheet + localStorage

4 个答案: