Как получить селекторы 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"Какой должна быть логика для поиска селекторов, которые имеют определенный цвет и помещают его в массив?
НОТА Это будет обработано на стороне сервера.
Спасибо
Решение
Используя понятия «Файлы», просто напишите логику в js, чтобы прочитать содержимое файла, а затем используйте некоторую логику регулярных выражений или любую другую логику, например, разделение содержимого путем передачи значений delimtre. На самом деле это не правильный подход, просто идея
Другие решения
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>