如何获取 CSS 样式的类

Question

I fetch all css styles for an element by using this code:我使用以下代码获取元素的所有 css 样式：

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.我需要知道是否有样式，如果有，哪个类将 CSS 样式带到此列表中。

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.我需要知道是否有一个应用这种样式的类，是否有一个类的名称有这个类，最好是来自哪个 CSS 文件。

If there is a way to get this, info what is the best way to do that?如果有办法做到这一点，请说明最好的方法是什么？

Answer 1

The below code is tested in my localhost.以下代码在我的本地主机中进行了测试。 I have used jQuery.我用过 jQuery。

HTML 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(/(\r\n\t|\n|\r\t)/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样式表-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.我得到了哪个样式表和哪个类的 console.log 结果。

Thank you.谢谢你。

如何获取 CSS 样式的类

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-01-20 11:57:06

如何获取 CSS 样式的类

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-20 11:57:06

解决方案1
0 已采纳 2019-01-20 11:57:06