Question

我使用其他人的代码片段进行背景和颜色变化，以便在HTML5会话中存储更改。这对我很有用。

但是，我真的想稍微详细说明一下，这就是我被困住的地方。

以下是我已完成的示例笔，使用我当前正在进行的网站的代码：https://codepen.io/iamfnah/pen/NgoyKy

使用手风琴下面的复选框，注意身体背景和颜色类切换。

以下是该示例中的JS：

    document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
function dark() {
     if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') {

            sessionStorage.setItem('bg', 'rgb(51, 51, 51)');
            sessionStorage.setItem('cc', '#00ff00');
     }
    else if (sessionStorage.getItem('bg') == null || undefined) {
        sessionStorage.setItem('bg', 'rgb(51, 51, 51)');
        sessionStorage.setItem('cc', '#00ff00');

    }
    else if( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') {

        sessionStorage.setItem('bg', 'rgb(255, 255, 255)');
        sessionStorage.setItem('cc', '#333');
    }
document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
}

有手风琴的CSS类，Bootstrap默认类，我希望使用相同的切换复选框来控制颜色变化。

这些是.panel-body和.panel-default>.panel-heading。

所以在切换到黑暗的背景时，我希望应用这些样式;

.panel-body {
  background-color: #1b1b1b;
  color: #ccc;
}
.panel-default>.panel-heading {
  background-color: #373737;
  color: #ccc;
}

我不知道你如何在JS中指定这样的样式。我做了一个假设，有几行需要添加到JS的顶部，sessionStorage.getItem来定义这些类，然后类似于bg和{{1已经在示例中的那些？

我已经尝试过了，但我尝试过的所有内容都会使脚本失效。

任何人都可以帮助我使用正确的JS扩展我当前的脚本吗？

感谢。

Answer 1

最简单的方法是让所有规则都依赖于一个身体类：

body.theme1 .panel-body {
  background-color: #1b1b1b;
  color: #ccc;
}
body.theme1 .panel-default > .panel-heading {
  background-color: #373737;
  color: #ccc;
}

将所有样式存储在这样的规则中。

要更改主题，您需要做的就是调用它：

document.body.className = "theme1";

这显然也是您需要存储在sessionStorage中的唯一内容。

以下是一个实例：https://jsfiddle.net/khrismuc/q1o1jmoq/

Answer 2

尝试添加此面板 - 暗级codepen

.panel-dark .panel-body {
  background-color: #1b1b1b;
  color: #ccc;
}
.panel-dark .panel-default>.panel-heading {
  background-color: #373737;
  color: #ccc;
}

Answer 3

getElementsByTagName返回一个节点数组，因此您必须使用[]来访问元素。

尝试

document.getElementsByTagName("body")[0] .style.backgroundColor = sessionStorage.getItem('bg');

Answer 4

JQuery和vanilla JavaScript都非常简单，因为它们允许您根据标准CSS语法查找元素，因此如果您尝试设计手风琴的样式（假设它有id accordion 1}}并且您之前已将类名存储在sessionStorage中并检索它们，并且它们现在存储在字符串变量pb和ph中）...

JQuery：

$("#accordion").addClass(pb + " " + ph);
// There is also .removeClass() and .toggleClass()

JavaScript：

document.getElementById("accordion").classList.add(pb, ph);
// There is also .remove() and .toggle()

虽然您可以访问元素的className属性并提供类名作为空格分隔列表，但使用classList.add()和classList.remove()要简单得多，并且不易出错。

Answer 5

根据您要定位的浏览器兼容性（IE10 +），您可以使用classList

添加/删除/切换类

document.body.classList.add('panel-body')
document.body.classList.remove('panel-body')

JavaScript中的CSS类

5 个答案: