创建一个简单的样式切换器

改善网站用户体验的一种方法是允许访问者对网站的某些方面进行个性化设置。 从增加字体大小到选择合适的语言或语言环境，这都可以。 作为开发人员，实现此目标面临双重挑战。 您必须首先使用户能够进行个性化设置，并在下次访问时记住它们。 本教程将教您如何创建样式切换器，以及如何使用本地存储来记住用户的首选项。

基础

我们需要的第一件事是一个基本的HTML页面，其中包含一些内容和样式。 我还将添加一个select元素，使访问者可以在样式之间进行更改。 该页面的外观示例如下所示。

请参阅CodePen上的SitePoint （ @SitePoint ）的笔简单样式切换器（1） 。

对事件做出反应

由于使用下拉菜单在样式之间进行切换，因此我们需要将事件侦听器附加到select元素，该元素在用户每次选择新样式时都会做出适当的反应。

根据W3C DOM 2级事件模型 ，注册事件处理程序的标准方法如下：

element.addEventListener(<event-name>, <callback>, <use-capture>);

每个参数的含义是：

• event-name –一个字符串，代表您要监听的事件的名称或类型。
• callback –每当事件触发时都会调用的函数。
• use-capture –一个布尔值，声明是否应在捕获阶段触发回调。 这是事件从文档的根流到目标的时候。

不幸的是，IE8及其前身不遵守该模型。 取而代之的是，它们出于相同目的提供了替代的attachEvent()方法。 是否选择支持这些旧版本的IE取决于您，并且取决于访问者指标。 您应该权衡支持较旧浏览器的成本和它所带来的好处。 在这种情况下，只需要使用简单的polyfill就可以了，因此支持IE8并不是什么大问题。 以下代码示例演示如何在所有浏览器中处理select元素的change事件。

请参阅CodePen上的SitePoint （ @SitePoint ）的笔简单样式切换器（2） 。

在switchStyles()函数中，必须注意， this是指触发事件的元素（在本例中为select元素）。 因此， this.options将使我们能够访问select元素的option元素，而this.options[this.selectedIndex]将使我们能够访问当前选择的元素。 从那里很容易访问option的value属性。

还要注意，代码使用console.log()而不是alert() 。 这样做是因为alert()阻止了UI，并且需要先将其关闭，然后才能继续执行JavaScript。 在这个示例中，还算不错，但是在更复杂的情况下（例如检查可伸缩数组的元素），这种方法可能很难看。 如果不确定如何打开浏览器控制台，可以在此处找到。 如果您想了解更多有关使用控制台进行JavaScript调试的信息，可以在此处进行 。

改变风格

现在是时候向我们的页面添加一些简单的样式，用户可以在其中进行选择。 将以下CSS代码添加到您的项目中：

/* High contrast */
body.high-contrast{
    background-color: DarkBlue;
    color: yellow
}

body.high-contrast h1{
    text-shadow: none;
}

/* Print */
body.print h1{
    text-shadow: none;
}

body.print img{
    display: none;
}

当用户从下拉菜单中选择其他样式时，我们将直接将适当的类应用于主体，并删除所有其他类：

function switchStyles() {
  var selectedOption = this.options[this.selectedIndex],
      className = selectedOption.value;

  document.body.className = className;
}

至此，我们有了一个功能齐全的样式切换器，如以下演示所示：

请参阅CodePen上SitePoint （ @SitePoint ）的笔简单样式切换器（3） 。

在工作表级别上工作

换掉类名对于我们的演示非常有用。 但是，如果要处理大量样式，则最好将它们放在外部样式表中。 然后，您可以换出样式表，而不是单独的类。 下面的代码假定每页只有一个样式表，显示了如何完成此操作。

function switchStyles() {
  var linkTag = document.getElementsByTagName('link')[0],
      currentStylesheet = linkTag.href.replace(/^.*[\\\/]/, ''),
      newStylesheet = this.options[this.selectedIndex].value + '.css';

  linkTag.href = linkTag.href.replace(currentStylesheet, newStylesheet);
}

记住用户首选项

至此，我们有了功能样式切换器。 不幸的是，重新加载页面时，所有更改的样式都将丢失。 为了避免这个问题，我们将使用客户端存储来保存用户的首选项。 然后，我们可以在每次加载页面时恢复这些首选项。

有多种客户端存储技术可供选择。 您可以在文章HTML5浏览器存储：过去，现在和将来中找到它们的完整概述。 就本示例而言，我们将使用本地存储 。 本地存储享有广泛的浏览器支持，并为我们提供了多达5MB的持久存储。 而且，与cookie不同，本地存储中存储的信息永远不会传输到服务器。 如果您确实需要支持古老的浏览器（穷人）， 可以使用polyfill来简化您的生活。 另外，请注意，某些浏览器（例如IE8）不支持使用file://协议的本地存储。

本地存储的基本语法如下所示。

// is localStorage available?
if (typeof window.localStorage != 'undefined') {
    // store
    localStorage.setItem('hello', 'Hello World!');
 
    // retrieve
    console.log(localStorage.getItem('hello'));
 
    // delete
    localStorage.removeItem('hello');
}

要在我们的页面上实现此功能，每次select元素的值更改时，我们都需要保存用户的首选样式：

localStorage.setItem('bodyClassName', className);

我们还需要在页面加载时检查此键值对的存在，如果找到它们，则相应地设置主体的类名。 我们可以通过首先尝试检索键值对来做到这一点：

// this will be null if not present
var storedClassName = localStorage.getItem('bodyClassName');

如果该项存在，我们可以遍历select元素的选项，并将它们的值与我们从本地存储中检索到的值进行比较。 如果它们匹配，那么我们可以相应地设置select元素的selected index属性：

if (storedClassName) {
  for(var i = 0; i < styleSwitcher.options.length; i++){
    if (styleSwitcher.options[i].value === storedClassName){
      styleSwitcher.selectedIndex = i;
    }
  }
}

以下演示结合了这些更改。

请参见CodePen上的SitePoint （ @SitePoint ）的笔简单样式切换器（4） 。

现在，我们可以通过下拉菜单更改样式。 此外，当我们刷新页面时，下拉菜单将还原为先前的选择。 但是，在重新加载时，样式不会更改以匹配下拉选择的样式。 是什么赋予了？

好吧，当我们以编程方式更改select元素时，不执行附加到它的事件处理程序。 让我们用自己的触发函数对此进行补救：

function trigger(action, el) {
  if (document.createEvent) {
    var event = document.createEvent('HTMLEvents');

    event.initEvent(action, true, false);
    el.dispatchEvent(event);
  } else {
    el.fireEvent('on' + action);
  }    
}

我们可以向该函数传递一个我们想触发的动作，以及一个触发它的元素。 然后，该函数检查浏览器是否响应document.createEvent() （所有现代的，符合标准的浏览器都响应）。 如果是这样，则它使用dispatchEvent()来触发操作。 否则，它将恢复为使用fireEvent() 。 您可以在本文中阅读有关创建自定义事件的更多信息： 如何在JavaScript中创建自定义事件

难题的最后一步是添加以下代码行：

trigger('change', styleSwitcher);

添加此行之后，以下演示中显示了最终代码。

请参阅CodePen上SitePoint （ @SitePoint ）的笔简单样式切换器（5） 。

结论

本教程向您展示了如何允许用户自定义页面的各个部分。 您还学习了如何记住用户的偏好，以增强他们对您网站的整体体验。 如果使用得当，这是一项强大的技术，可以使您的网站脱颖而出。 我很想听听您是否在评论中采用了这种技术，以及任何成功（或恐怖）的故事。

From: https://www.sitepoint.com/creating-simple-style-switcher/