Получить все значения свойств фона и цвета классов css
Я хочу получить все значения свойств фона и цвета всех объявлений CSS.
Например:
body {
background: #fff;
}
.aaa {
background: #dedede;
color: #000
}
.text {
color: #333;
padding: 10px
}
Я хочу получить такой вывод, и значения этих свойств должны храниться в массиве.
body {
background: #fff;
}
.aaa {
background: #dedede;
color: #000
}
.text {
color: #333;
}
Я пытался сделать это с помощью jQuery. Я могу получить значение свойства фона одного конкретного класса, например .aaa или .text. Как получить значения всех классов?
$('#btn-invert').on('click', function() {
var color = $("body").css("background");
// var test = invertColor("#00a3fe");
console.info(color);
});
@nnnnnn нравится это ["#fff", "#dedede", "#000", "#333"]
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Чтобы прочитать стиль, используйте document.styleSheets, который содержит всю информацию (let cssArr=... во фрагменте). Когда вы читаете его в свой массив, вы можете сгенерировать строку из этого массива (let genCssStr во фрагменте). Цвета, прочитанные таким образом, находятся в формате, например. rgb(255, 255, 255) поэтому нам нужно преобразовать их в шестнадцатеричный формат (от rgbToHex src здесь)
const rgbToHex = (rgbStr) => rgbStr && '#'+rgbStr.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2, '0')).join('');
const styles = document.styleSheets;
let cssArr =[...styles[0].cssRules].map(x=> ({
class: x.selectorText,
color: rgbToHex(x.style.color),
background: rgbToHex(x.style.background),
}));
let genCssStr=''; cssArr.forEach(x=> genCssStr+=`
${x.class} {
${(x.background ? 'background: '+x.background : '')}
${(x.color ? 'color: '+x.color : '')}
}
`.replace(/^ \n/gm,'')); // remove empty lines
console.info("array:", JSON.stringify(cssArr));
console.info("text:\n", genCssStr);body {
background: #fff;
}
.aaa {
background: #dedede;
color: #000
}
.text {
color: #333;
padding: 10px
}хороший ответ, но, пожалуйста, добавьте объяснение
массив: [{"класс":"тело","цвет":"","фон":"#ffffNaN"},{"класс":".myClass","цвет":"#000000" ,"background":"#dedeNaN"},{"class":".myClass2","color":"#333333","background":"#ffffNaN"}]
@VipinKumarSoni можешь показать тебе css для цветов? Я использую простую функцию rgbToHex, которая работает со стилями OP, но вы можете найти более сложную rgbToHex версию в stackOverflow (но это не тема вопроса OP, поэтому я не буду углубляться в нее в этом ответе)
@KamilKiełczewski получил эту ошибку -> Uncaught DOMException: не удалось прочитать свойство «cssRules» из «CSSStyleSheet»: невозможно получить доступ к правилам
@Karuppiah это отдельная проблема (и вопрос) - может быть поможет ответ это - если не найти / задать вопрос в stackoverflow. В случае проблемы CORS вы, вероятно, не сможете использовать это решение (напрямую или вообще)
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>jQuery Tests</title>
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(function(){
var myArray = [];
$("*").each(function() {
var oneArray = [];
var tag = $(this).prop("tagName");
var classname = $(this).attr("class") ? $(this).attr("class") : "N/A";
var background = $(this).css("background-color");
var color = $(this).css("color");
oneArray["tag"] = tag;
oneArray["classname"] = classname;
oneArray["background"] = background;
oneArray["color"] = color;
myArray.push(oneArray);
});
console.info(myArray);
});
</script>
<style>
body {
background: #fff;
}
.myClass {
background: #dedede;
color: #000
}
.myClass2 {
color: #333;
background: #fff;
}
</style>
</head>
<body>
<a class = "myClass" href = "#">link</a>
<div class = "myClass2"></div>
</body>
</html>
обратитесь к этому ответу: stackoverflow.com/questions/14318209/…