当页面加载时,我可以搜索和替换CSS文件中的颜色吗?


Can I search and replace colours in a CSS file when a page loads?

我想做的是搜索CSS文档中特定颜色的所有实例,由其十六进制值标识,并用新的十六进制值替换所有这些实例。然后,颜色改变后,CSS应用于页面。

实际上,CSS文档只是一个文本文件,所以肯定有一种方法可以在它被提供给浏览器之前捕获它,并进行一些基于文本的搜索和替换。查找一个特定的HEX代码,并用另一个实例替换所有实例。

这怎么可能呢?

您可以这样做:

function changeColor(oldColor, newColor) {
   var all = document.getElementsByTagName('*');
   Array.prototype.forEach.call(all, function(element){
     if (element.style.background === oldColor) {
       element.style.background = newColor;
     }
   })  
}

这样你就循环遍历页面上的每个元素,检查它是否有旧的颜色,如果有,将其更改为新颜色。

首先,你的代码中有一些错误。

我创建了一个JSFIDDLE

    function changeColor(color) {
   var a =  document.getElementById('coloredThing');
   a.style.background = color;
}