当举行哀悼活动时，有时会要求将网站调整为黑白色，确保展现效果肃穆凝重
通过以下方法可快速将网站调整为黑白
首先，先下载grayscale.js文件，需要使用这个插件实现效果
链接: https://pan.baidu.com/s/1KWbWDWHclvjPcZfMIJljxA 提取码: uw9e
修改首页
在html文件中加入以下代码（自行更换grayscale.js的路径）
<!-- 特殊日子IE10及其以上浏览器 全站灰色 -->
<script type="text/javascript" src="js/grayscale.js" ></script>
<style>
html, html *{filter: gray !important;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);
}
</style>
<script type="text/javascript">var navStr = navigator.userAgent.toLowerCase();if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11grayscale(document.body);grayscale(document.getElementsByTagName("img"));}
</script>
修改全站
要将全站都变成黑白的话，需要在全站公用的js文件中加入代码，如果没有公用js的话，就只能在每个页面加个js文件了
公用js文件内容（自行更换grayscale.js的路径）：
//特殊日子IE10及其以上浏览器 全站灰色
document.write('<script type="text/javascript" src="js/grayscale.js" ></script>');
document.write('<style>');
document.write('html, html *{');
document.write(' filter: gray !important;');
document.write(' filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);');
document.write(' filter: grayscale(100%);');
document.write(' -webkit-filter: grayscale(100%);');
document.write(' -moz-filter: grayscale(100%);');
document.write(' -ms-filter: grayscale(100%);');
document.write(' -o-filter: grayscale(100%); ');
document.write('}');
document.write('</style>');
document.write('<script type="text/javascript">');
document.write(' var navStr = navigator.userAgent.toLowerCase();');
document.write(' if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){');
document.write(' grayscale(document.body);');
document.write(' grayscale(document.getElementsByTagName("img"));');
document.write(' }');
document.write('</script>');
点击可切换黑白
如果需要点击一下变成黑白，再点击一下变回原样，需要在html文件中加入以下代码（自行更换grayscale.js的路径）
<style>/* 特殊日子 全站灰色 */
.site-gray, .site-gray *{filter: gray !important;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);
}
</style><a href="javascript:;" class="site-gray" data-gray="0">网站变灰</a><!-- 特殊日子IE10及其以上浏览器 全站灰色 -->
<script src="js/grayscale.js"></script>
<script>var navStr = navigator.userAgent.toLowerCase();$(".site-gray").click(function(){var gray = $(this).attr("data-gray");if( gray == 0 ){if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11grayscale(document.body);grayscale(document.getElementsByTagName("img"));}$("html").addClass("site-gray");$(this).attr("data-gray", 1);}else{if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11grayscale.reset(document.body);grayscale.reset(document.getElementsByTagName("img"));}$("html").removeClass("site-gray");$(this).attr("data-gray", 0);}});
</script>
可以使用下面的兼容性写法，达到兼容更多浏览器的作用。
以下适用于主流浏览器（除IE外），放置在网站公共头部或者底部文件里
如果需要对IE浏览器进行兼容
还需要使用到一个JS，两者搭配可以达到较好的兼容性
引入到页面中并指定变黑白的部分即可，如果指定全部，使用body就可以了
grayscale(document.body); //整站变成灰色
grayscale(document.getElementById("main"));//指定元素变灰色
grayscale.reset(document.getElementById("main"));//指定元素还原
