使用CSS自定义属性和Web存储API更改站点的布局和颜色。
CSS自定义属性（通常称为CSS变量）一直在稳步进入浏览器一段时间。随着3月份微软Edge 15的发布，现在所有主流的现代浏览器都支持它。
这意味着对于不需要支持诸如Internet Explorer之类的传统浏览器而不负担的项目，可以考虑使用CSS变量（所有意图和目的） - 安全使用。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
编写更好CSS的指南
许多开发人员已经使用具有诸如Sass或Less之类的预处理器的变量作为减少代码重复的手段。本机CSS变量的工作方式大致相同，但不需要任何额外的构建步骤，像常规CSS属性一样级联，最重要的是在运行时可用。
这些优点使本机CSS变量成为其预处理器兄弟姐妹的一个优势，为开发人员打开了大量有趣的事情，而且代码少得多。
在本教程中，我们将探索如何使用CSS变量实现网站建立到名为NoteApp的模拟Web应用程序。这将涉及编写CSS和JavaScript以允许用户更改颜色方案并切换显示的列数。然后，我们将利用Web Storage API来确保为将来的会话保存任何更改。
获取教程文件
首先，从Web Designer的FileSilo下载项目文件。要做到这一点，去吧FileSilo在本教程旁边选择免费资料和免费内容。注意：首次用户必须注册才能使用FileSilo。
01.设置工作区
在“ / website-template ”目录中，您将找到静态NoteApp网页，我们将使用CSS变量和Web Storage API实现网站建设。打开您首选文本编辑器中的目录。
02.设置我们的CSS变量
在' main.css '中，您会发现很多项目的CSS。在顶部，创建一个针对“ root ”伪类的块。在其中定义变量，如下面的代码段。该根块包含全局变量，它将像任何常规的CSS属性一样级联到我们的样式表中。
:root {
--primary: #2F353E;
--secondary: #2B9BCA;
--tertiary: #F3583F;
--quaternary: #E0E1E2;
--quinary: #FFFFFF;
}
03.用变量替换颜色
通过手动或使用find / replace进行样式表，并从根块中与其对应的变量交换任何静态颜色十六进制代码。为此，请使用var函数并传递变量的名称。这告诉浏览器引用该变量的值。例如：
.c-header {
background-color:var(--primary);
color:var(--quinary);
}
找到图标的内联SVG
打开' index.html '，你注意到的第一件事就是一个大的SVG元素。它包含所有页面的图标的路径，每个图标都包含在符号元素中，并赋予唯一的ID。这些符号在需要时使用' use '元素进行引用，允许重复使用图标而不会重复SVG代码。
添加CSS变量到SVG
使用内联SVG而不是.SVG文件的一个好处是CSS可以访问其内部结构。这意味着我们的CSS变量（除了Edge，在写作时）。在“ index.html ”中，将SVG的样式块替换为下面的代码段。现在，每个SVG的颜色都链接到我们的CSS变量的值。
创建一个列变量
我们也可以为颜色以外的属性使用CSS变量。在根块中创建一个新变量，将其称为“ 列 ”，并赋值为3.这应该与页面上“ 列 ”UI组件的默认值相匹配。功能完成后，此组件将切换列数。
:root {
--primary: #2F353E;
--secondary: #2B9BCA;
--tertiary: #F3583F;
--quaternary: #E0E1E2;
--quinary: #FFFFFF;
--columns: 3;
}
实施列切换
使用我们的新列变量和calc（）函数，我们现在将计算每个音符组件应该多大，以创建正确数量的列。例如，如果列设置为4，则每个音符的宽度应为25％。
.c-note {
width:calc(100% / var(--columns));
}
添加JS类和数据属性
当将JS行为应用于DOM元素时，通过具有JS前缀的类来挂接它。这将元素的功能方面与CSS脱钩。我们为所有的颜色和无线电输入添加一个' js-update-variable '类，并引用一个' data-attribute '来引用要更新的对应变量。
class="js-update-variable u-hidden-visually"
data-variable="primary">
添加JS来更新CSS变量
打开' main.js '并添加下面的代码段。这循环了我们所有的' js-update-variable '输入，并添加了逻辑，所以在更改时，其数据变量属性中引用的变量将更新为输入值。颜色色板和列切换应该现在正在工作！
var varTrig = document
.querySelectorAll(".js-update-variable");
for(var i = 0; i < varTrig.length; i++){
varTrig[i]
.addEventListener("change", function(){
document.documentElement.style
.setProperty("--" + this.dataset.variable,
this.value);
});
}
10.将JS类附加到保存按钮
只有当用户点击保存按钮时，才能保存用户的配色方案，这样可以让他们尽可能多地尝试主题，而不会自动覆盖当前的配置。要开始，将' .js-save-colors '添加到“ 保存 ”按钮以作为我们的JS钩子。
data-modal="js-modal" data-modal
-content="js-colours-modal-content">
Save
11.创建颜色数组
返回' main.js '，声明一个名为' colors ' 的新变量，并分配一个包含所有要保存的所有颜色变量的新数组，一旦保存按钮被点击。
var colours = [
"primary",
"secondary",
"tertiary",
"quaternary",
"quinary"
];
12.构建保存按钮事件侦听器
在colors数组下方，为“ js-save-colors ”类创建一个点击事件侦听器，我们以前添加到“保存”按钮。在其中创建一个名为' htmlStyles ' 的新变量，并为其分配根HTML元素的计算属性。我们将使用它来访问我们的CSS变量。
document.querySelector(".js-save-colours")
.addEventListener("click", function() {
var htmlStyles = window
.getComputedStyle(document
.querySelector("html")),
}),
记录CSS颜色变量
接下来，在事件侦听器中，创建一个名为“ coloursToSave ” 的新变量，并为其分配一个空对象。接下来，使用第11步中的' colors '数组创建一个FOR循环。在其中，我们将把' colors '数组中提到的变量的完整键/值记录添加到' coloursToSave '对象。
array to the 'coloursToSave' object.
coloursToSave = new Object;
for(var i = 0; i < colours.length; i++) {
coloursToSave[colours[i]] = htmlStyles
.getPropertyValue("--" + colours[i]);
}
14.将coloursToSave发送到localStorage
现在我们将所有颜色变量保存在“ coloursToSave ”中，我们将它发送到名为localStorage的Web Storage API的组件。这本质上是一个在会话中持续存在的对象。我们可以使用其' setItem（） '方法在其中存储其他对象。我们把它发送给我们的' coloursToSave '对象。
localStorage.setItem("colours",
JSON.stringify(coloursToSave));
15.将一个JS类添加到列
除了颜色之外，我们还希望确保我们选择的列号在会话中仍然存在。第一步是为列组件中的所有无线电输入添加“ js-update-columns ”。
="js-update-variable js-update-columns
u-hidden-visually" value="1"
data-variable="columns">
16.将列发送到localStorage
对于每个' js-update-columns '，我们接下来分配事件侦听器来监视更改。检测时，我们再将' columns '变量的当前值发送到localStorage，再次使用' setItem（） '方法。与颜色不同，我们不需要对该值进行字符串化，因为它不是一个对象。
var colInputs = document
.querySelectorAll(".js-update-columns");
for(var i = 0; i < colInputs; i++) {
colInputs[i].addEventListener("change",
function(){ var htmlStyles = window
.getComputedStyle(document
.querySelector("html"));
localStorage.setItem("columns",
htmlStyles.getPropertyValue("--columns"));
});}
17.处理新会话
如果用户在以前选择颜色和列偏好设置之后返回，我们需要构建逻辑，这样保存的数据就会转回到CSS变量中。第一步是定义一个“ DOMContentLoaded ”事件侦听器，然后使用' if '语句来检查localStorage中使用其' getItem（） '方法的任何保存的数据。
document.addEventListener
("DOMContentLoaded",function() {
if(localStorage.getItem("colours")) {
}
if(localStorage.getItem("columns")) {
}
});
修改颜色变量
在颜色' if '语句中，创建一个名为“ savedColours ” 的新变量，并从localStorage为其分配解析的颜色对象的值。使用带有“ savedColours ” 的FOR IN循环，抓取每个颜色键/值对，并将其附加到根HTML元素作为CSS变量。
var savedColours = JSON.parse
(localStorage.getItem("colours"));
for(colour in savedColours){
document.documentElement.style.setProperty
("--" + colour, savedColours[colour]); }
19.收集列变量数据
在我们修改列变量之前，我们必须首先获取对localStorage中保存的数据的引用以及“ Columns ”组件中的无线电输入。后者是我们可以更新其状态，以确保正确的数字是预选的。
var columns = localStorage
.getItem("columns"),
columnTriggers = document.
querySelectorAll(".js-update-columns");
20.修改变量和状态新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
最后，我们将使用其保存的localStorage对应方式更新列CSS变量，并将“ Columns ”组件中相关无线电输入的checked属性设置为true。“ 列-1 ”是为了补偿NodeList列为零的事实。
document.documentElement.style
.setProperty("--columns", columns);
columnTriggers[columns - 1].checked = true;
21.测试成品
完成的产品：所有的模拟NoteApp页面现在应该可以工作
而已！模拟NoteApp页面上的所有内容现在都可以正常工作。您可以通过单击色板创建自己的颜色方案，然后通过保存按钮将其提交到localStorage。如果要切换显示的列数，请单击列组件中的相应编号。
来源：CSDN
作者：前端学习线路
链接：https://blog.csdn.net/webxuexi168/article/details/104502170