JS+CSS网站整站变黑白效果

要在整个网站上实现黑白效果，可以使用JavaScript和CSS来实现。以下是一种实现方式，兼容IE和主流浏览器：

HTML结构：

在HTML文件中，确保整个网站的内容都包含在一个容器元素中，比如一个div元素，给它一个唯一的id，比如”site-container”。

htmlCopy code
<div id="site-container">

  <!-- 网站内容 -->
</div>

CSS样式：

为了实现黑白效果，我们可以通过CSS的filter属性来实现。将整个网站容器的filter属性设置为”grayscale(100%)”即可将网站变为黑白效果。

cssCopy code
#site-container {

  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* 兼容Webkit内核浏览器，如Chrome和Safari */
}

JavaScript脚本：

为了保证兼容性，我们需要在页面加载完成后再应用黑白效果。可以使用以下JavaScript代码：

javascriptCopy code
document.addEventListener("DOMContentLoaded", function() {

  var siteContainer = document.getElementById("site-container");
  siteContainer.style.filter = "grayscale(100%)";
  siteContainer.style.webkitFilter = "grayscale(100%)";
});

这样，当页面加载完成后，整个网站容器就会应用黑白滤镜效果，实现黑白效果的整站变化。请确保将上述代码放在合适的位置，比如放在页面的底部或者在外部的JavaScript文件中。

请注意，使用滤镜效果可能会影响一些图片和其他元素的显示效果，可能需要根据具体情况进行适当的调整。另外，滤镜效果在低版本的IE浏览器中可能不被支持或者效果不理想，建议在实际使用中进行测试和调整。