I fetch all css styles for an element by using this code:
style = window.getComputedStyle(dom, null)
so far so good.
I need to know if there styles and if, which class brings the CSS styles to this list.
For example we look the result line with
"background-image": "none",
I need to know if there is a class that applies this style and if there is a class which name has this class and in best case from which CSS file it is.
If there is a way to get this, info what is the best way to do that?
Advertisement
Answer
The below code is tested in my localhost. I have used jQuery.
HTML
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style2.css"> <title>Document</title> </head> <body id="body"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> jQuery(document).ready(function () { captureLinks(); }); function captureLinks() { hrefs = []; jQuery("link").each(function () { hrefs.push(jQuery(this).attr('href')); }) css_styles = {}; hrefs_count = 0; jQuery.each(hrefs, function (index, href) { jQuery.ajax({ url: href, success: function (data) { css_styles[href] = data.replace(/ /g, '').replace(/(rnt|n|rt)/gm, ""); }, complete: function () { hrefs_count = hrefs_count + 1; if (hrefs_count === hrefs.length) allCssCaptured(css_styles); } }) }) } function allCssCaptured(css_styles) { css_reference = "background-image:none"; css_reference_remove_white_space = css_reference.replace(/ /g, ':'); css_sheet_reference = {}; jQuery.each(css_styles, function (filename, content) { if (content.indexOf(css_reference_remove_white_space) !== -1) { split_content = content.split(css_reference_remove_white_space); left_of_css_reference = split_content[0]; for (var i = left_of_css_reference.length; i >= 0; i--) { if (left_of_css_reference[i] === '{') { j = i - 1; for (j = i - 1; j >= 0; j--) { if (left_of_css_reference[j] === ".") { css_string = ''; for (var k = j; k < i; k++) { css_string += left_of_css_reference[k]; } css_sheet_reference[filename] = css_string; } } } } } }); console.log(css_sheet_reference) } </script> </body> </html>
Stylesheet-2
.no-image { color:yellow; background-image: none; }
Stylesheet
.b{ background-color: blue; } .a{ background-color: #000; } .test{ background-color: red; width: 100px; height: 50px; }
And i got the console.log result of which stylesheet and which class.
Thank you.