有的网站可能需要用到全站黑白功能(一般常用于悼念日) ，最方便就是增加css代码，但经测试不兼容IE10、11浏览器，所以配合grayscale.js这个插件，可以完美兼容所有浏览器，使用JS缺点是如网站图片多的话，在变黑白时会卡住几秒钟，为了兼容性也就牺牲了体验度了。效果演示GIF如下：

      我们先添加定义好CSS样式，如下：

1. /* 特殊日子 全站灰色 */ 
2. .site-gray, .site-gray *{ 
3.     filter: gray !important; 
4.     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
5.     filter: grayscale(100%); 
6.     -webkit-filter: grayscale(100%); 
7.     -moz-filter: grayscale(100%); 
8.     -ms-filter: grayscale(100%); 
9.     -o-filter: grayscale(100%);  
10. } 

      HTML添加个a链接用于点击变灰：

1. <a class="site-gray" data-gray="0" href="nojavascript...;">网站变灰a> 

      引用Jq和grayscale.js插件：

1. <script src="js/jquery.js">script> 
2. <script src="js/grayscale.js">script>

      先判断网站是否已变黑白，然后判断浏览器，是IE10、11的话则加载JS插件，否则使用CSS即可，给添加Class，JS代码如下：

1. var navStr = navigator.userAgent.toLowerCase(); 
2. $(".site-gray").click(function(){ 
3.     var gray = $(this).attr("data-gray"); 
4.     if( gray == 0 ) 
5.     { 
6.         if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11 
7.             grayscale(document.body); 
8.             grayscale(document.getElementsByTagName("img")); 
9.         } 
10.         $("html").addClass("site-gray"); 
11.         $(this).attr("data-gray", 1); 
12.     } 
13.     else 
14.     { 
15.         if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11 
16.             grayscale.reset(document.body); 
17.             grayscale.reset(document.getElementsByTagName("img")); 
18.         } 
19.         $("html").removeClass("site-gray"); 
20.         $(this).attr("data-gray", 0); 
21.     } 
22. });