scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了（我的Hexo next博客引发的问题）

个人博客：https://mmmmmm.me

源码：https://github.com/dataiyangu/dataiyangu.github.io

时间

2019.3.3

背景

之前给自己加了护眼色的小功能，本来应该是这样的：

今天发现，点击护眼色后期初是没问题的，但是只要一滚动就会变成下面这样。

问题解决

发现不滚动还是正确的，一滚动就暴露错误了，想起来前段时间加了scrollReveal.js

所以应该是scrollReveal的问题。

跟了跟源码，发现

update: function (el) { var that = this; var css = this.genCSS(el); var style = this.styleBank[el.getAttribute("data-scroll-reveal-id")]; if (style != null) style += ";"; else style = ""; if (!el.getAttribute('data-scroll-reveal-initialized')) { el.setAttribute('style', style + css.initial); el.setAttribute('data-scroll-reveal-initialized', true); } if (!this.isElementInViewport(el, this.options.viewportFactor)) { if (this.options.reset) { el.setAttribute('style', style + css.initial + css.reset); } return; } if (el.getAttribute('data-scroll-reveal-complete')) return; if (this.isElementInViewport(el, this.options.viewportFactor)) { el.setAttribute('style', style + css.target + css.transition+'background:'+$("#canvas").css("background")+''); // Without reset enabled, we can safely remove the style tag // to prevent CSS specificy wars with authored CSS. if (!this.options.reset) { setTimeout(function () { if (style != "") { el.setAttribute('style', style); } else { el.removeAttribute('style'); } el.setAttribute('data-scroll-reveal-complete',true); that.options.complete(el); }, css.totalDuration); } return; } },

这里将我们将要发生动画的div的style属性进行了重写，从上面看的是在原来的style上加入了";"，然后往后面加入scrollReveal自己的style，可是仔细想想，我的护眼模式点击改变背景色，并没有经过刷新，所以他原来的style并不是后来点击之后的style，所以还是没有加上。

最终解决方案是在

if (this.isElementInViewport(el, this.options.viewportFactor)) { el.setAttribute('style', style + css.target + css.transition+'background:'+$("#canvas").css("background")+'');

'background:'+$("#canvas").css("background")+''

将我自己的样式在拼到了这个地方。