javascript - 如何找到与元素关联的 css 文件名？

Question

我不确定这是否可能，但我想知道在单击一个元素(div 或...)后与该元素关联的 css 文件名。

例子

<link href="style_1.css" rel="stylesheet" type="text/css" />
<link href="style_2.css" rel="stylesheet" type="text/css" />

<div class='my_class'></div>

当我点击这个 div 时，我需要知道 div.my_class 的样式是从哪个 css 文件名关联的 style_1.css 或 style_2.css

Answer 1

//Need exact selector like if class is sampleclass then className='.sampleClass'   
var classFinder = function (className) {

        $.each(document.styleSheets, function (index, cssFile) {

            if (cssFile.href) var path = cssFile.href.toString();

            var classes = cssFile.rules || cssFile.cssRules;
            for (var x = 0; x < classes.length; x++) {
                if (classes[x].selectorText == className) {

                    //Find css file name from the file path
                    alert(path);
                }
            }
        });
    }

您必须从路径文本中找到文件名。它仅适用于从同一域加载的样式表。即，如果您从跨域加载样式表，将无法工作。

-- 最初改编一个答案here & 找到更新的 fiddle here .