如果你在看[上篇：使用方法]的时候没有下载脚本文件，请现在下载，在这里不再贴出大段的代码，请对照文件来看这篇文章，给您带来的不便敬请谅解。文件下载地址：https://files.cnblogs.com/dingxue/css1_script.js
脚本第一行的styleList定义了这里用到的七种样式的全部信息，三个信息依次表示：风格代码、风格颜色、文件地址。风格代码用于区别各个不同的风格，在下面会用这个来启用和禁用对应的CSS文件；风格颜色为显示在页面上切换区的那个小色块儿的颜色，这里都是取得每种风格的背景色作为风格颜色；文件地址是此风格对应的CSS文件的地址，如果选择了另存CSS文件到其他地方，只需要修改这里就可以了。
之后是“引入样式文件到 <head> 中”，因为XHTML标准要求 <link> 标签只能出现在 <head> 区域里，所以没有采取 document.write() 的方式来引入CSS文件，而采用了类似 Omar AL Zabir 提出的 ensure 的方式。这里设置了 <link> 的 title 属性和 disabled 属性：title在切换时用于判断应该启用哪一个样式，来自于上面定义中的“风格代码”；disabled 属性把所有CSS文件在初始时设置为禁用状态，在下面页面加载完之后有一次重置，这里只是为了防止页面加载过慢时这些CSS文件对页面展现的一些影响。在引入JS文件的情况下也需要设置自定义样式也是因为这里，这里加载的CSS全是禁用，所以博客园系统本身的自定义样式是必须的。
“添加初始化过程到 window.onload”，这一部分用于使页面加载完自动执行一些操作，这是一段来自“百度”的代码，避免了和博客园系统中自带的 window.onload 有冲突，这几行代码有点意思。
接下来是“初始化”部分，主要是创建切换区域和里面那几个小色块儿并放到适当的位置。试了几次直接在 switcher.innerHTML 上做字符串操作，都没有成功，只好引入一个字符串变量，不晓得是哪里搞错了什么，还是浏览器就这么诡异。这个切换区的插入位置，就是现在页面上这个样子，在 sideBarMain 之上，也就是在侧边栏的最上面，如果想修改一下样子，或者换个位置，可以修改这里，并修改对应的CSS文件即可。在这段代码最后，是一个用正则获取已保存到 cookie 中的风格，如果用户曾经选择过风格并且 cookie 还有效，那么会自动切换到他上次的选择，如果没有选择过，这里把 gray 设置为默认的风格，你也可以修改为其他风格，但建议与系统默认的风格一致，这样可以避免第一次加载时的“闪屏”。这里其实是有问题的，在页面加载完成后才做这个操作，“闪屏”无法避免，不知道谁有更好的主意，期待回复，感谢支持。
最后是“样式切换”，先获取到所有 <link>，然后在第一个for循环中启用指定CSS而禁用其他CSS，为了保持统一，这里把默认的样式也声明到了上面的样式列表中，所以这个for循环一上来不把系统自带的样式给禁用了，就是那个 id="MainCss" 的，也是这个for里面用到了上面定义的“风格代码”，上面引入样式文件时的title属性在这里用到了。在设置完文件的启用/禁用状态之后，在第二个for循环里，恢复了所有小色块儿的初始大小(这里是8x8)，之后让当前选择的样式色块变大，以突出当前选择。在最后，将用户本次选择保存到了 cookie 中，用于到其他页面或下次访问时的自动加载，cookie 有限期设为30天，应该还算足够大。
代码写得不美，CSS也不完善，配色更别说，我自己是没什么信心，不过这依然是断断续续花了一天多时间写出来的，还是希望能对大家有所帮助。代码不高深，思路或许有可借鉴之处。同时欢迎大家继续完善这个功能，做出更好的样式出来。
感谢您能够看到这里，文章已经结束，有任何问题，请在下面发表评论，谢谢！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。