如何获取包含特定颜色的CSS选择器？

首先，对不起，我没有在这里放任何代码，因为我不知道该怎么做。如何获取包含特定颜色的CSS选择器？

我需要的是获得所有CSS选择器（在一个CSS文件中）明确包含颜色...比方说＃3C3C3C，举个例子。

例：读一个CSS文件

.first-selector div 
{ 
color: #3C3C3C; 
} 
.second-selector span 
{ 
background-color: #3C3C3C; 
} 
.thrid-selector 
{ 
border: 1px solid #3C3C3C; 
} 
.fourth-selector .nothing 
{ 
color: #00000; 
}

预期结果 - 提取成数组（唯一包含特定颜色风格）

array[0]['selector'] == ".first-selector div" 
array[0]['style'] == "color" 

array[1]['selector'] == ".second-selector span" 
array[1]['style'] == "background-color" 

array[2]['selector'] == ".thrid-selector" 
array[2]['style'] == "border"

应该是什么逻辑搜索具有特定颜色的选择器并将其放入数组中？

注意这将在服务器端进行处理。

感谢

来源

2014-11-04 Atthapon Junpun-eak

，没有PHP或Java参与。 – 2014-11-04 11:42:57

以及“java”如何与网页建设相关？ – 2014-11-04 11:43:31

当你说Java时，你碰巧指的是jQuery？ – user2209644 2014-11-04 11:44:00

使用文件的概念，只写在JS逻辑读取文件的内容，然后使用一些正则表达式逻辑或任何其他逻辑一样通过传递delimtre值分割的内容。事实上，这不是正确的做法，只是一个想法

来源

2014-11-04 11:53:07

“一个想法”不会被视为答案。事实上，任何人都可以想出解决方案，但是你必须意识到这一点。 ;） – 2014-11-04 11:54:00

嗯...是的，我们ryt。但是用这种方法我们可以得到预期的输出。但我刚才提到的是Idea，因为要求的人可能会或可能不会喜欢这种方法。 :( – 2014-11-04 12:00:27

期望的OP **不**接受你的答案。 – 2014-11-04 12:02:25

JavaScript将让你访问应用到文档的所有样式。检查每一个，看它是否包含颜色。

CSS

<style> 
    .first-selector div 
    { 
     color: #3C3C3C; 
    } 
    .second-selector span 
    { 
     background-color: #3C3C3C; 
    } 
    .third-selector 
    { 
     border: 1px solid #3C3C3C; 
    } 
    .fourth-selector .nothing 
    { 
     color: red; 
    } 
</style>

JS：

<script> 
    function getColorRules(color) 
    { 
//convert hex to rgb, since hex color styles are internally stored as rgb 

     if (/[#]{0,1}[0-9A-F]{6}/.test(color)) 
     { 
      color = color.replace('#', ''); 
      var r = parseInt(color.substr(0, 2), 16); 
      var g = parseInt(color.substr(2, 2), 16); 
      var b = parseInt(color.substr(4, 2), 16); 
      color = "rgb(" + r + ", " + g + ", " + b + ")"; 
     } 


     var returnArray = []; 
     //grab all stylesheets 
     var sheets = document.styleSheets; 
     for (var i in sheets) { 
      //to work in FF or chrome 
      var rules = sheets[i].rules || sheets[i].cssRules; 
      for (var r in rules) 
      { 
       //console.log(rules[r]); 

       if (rules[r].cssText !== undefined) { //ignore empty or non css properties 
        if (rules[r].cssText.indexOf(color) > -1) //if the color is found in the style rule 
        { //add it to an array 
         var style = { 
          selector: rules[r].selectorText, 
          style: rules[r].style.cssText.split(":")[0] 
         }; 
         returnArray.push(style); 
        } 
       } 
      } 
     } 
     return returnArray; 
    } 
    console.log(getColorRules("#3C3C3C")); 
//[{ selector=".first-selector div", style="color"}, { selector=".second-selector span", style="background-color"}, { selector=".third-selector", style="border"}] 
    console.log(getColorRules("red")); 
// [{ selector=".fourth-selector .nothing", style="color"}] 
</script>

如果你说 “搞定”

来源

2014-11-05 18:31:28 chiliNUT

如何获取包含特定颜色的CSS选择器？

回答

相关问题