如何找到与元素关联的 css 文件名？答案

【问题标题】：How to find the css file name associated with an element?如何找到与元素关联的 css 文件名？
【发布时间】：2014-10-15 05:42:59
【问题描述】：

我不确定这是否可能，但我想在单击一个元素（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 的样式与 style_1.css 或 style_2.css 关联的 css 文件名是什么

【问题讨论】：

不可能。如果你告诉我问题定义，我可以帮助你
你为什么想知道这个
有可能两个css文件都可以关联单个元素。

标签： javascript jquery css dom

【解决方案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 & Find the updated fiddle here.

【讨论】：

【解决方案2】：

如果我是你，我会使用 Chrome 的开发者工具：

1.) 在 Chrome 中打开要编辑的页面
2.) 右键单击并单击“检查元素”
3. ) 在开发者工具里面往右看，可以看到关联的css文件。

在此示例中，您可以看到您的名字“Milo”的样式位于“all.css”文件中

【讨论】：

【解决方案3】：

我认为使用javascript是可能的，下一个想法是（只是原型）：

检查页面上的所有链接并尝试通过ajax获取css文件

var styles = $("link[rel='stylesheet'");
var from   = [];
styles.each(function(){
  var curr = $(this);
  $.get(curr.attr("href"), function(res){
    // some operations
    var text = res;
    if(text.indexOf(".someClass") > -1)
      from.push(curr.attr("href"));
  });
});
console.log(from);

我认为这是可能的，但有一些限制：例如允许来源。

补充：此外，您必须了解 css 样式可以与元素在同一页面中。所以你必须检查页面上的样式标签。

【讨论】：

【解决方案4】：

1) 您可以使用网络浏览器，右键单击元素，然后选择“检查元素”（不要尝试 IE）。它列出了样式以及它们的来源。 2) 我没有使用过Brackets editor，但我知道有“快速编辑”选项可以显示给定元素的关联样式。不确定它是否显示源文件。

【讨论】：

【解决方案5】：

实际上，如果您只是想了解任何 div 的 css 样式，您可以很容易地做到这一点。在 Firefox 中，右键单击元素并选择“检查元素”。您将在检查器中看到 css，它会告诉您它位于哪一行以及位于哪个 css 文件中。同样在 Chrome 或 Safari 中，检查元素执行相同的操作。我不是 Windows 用户，但我猜 IE 中的 F12 也会向您展示。如果您希望它在单击等时显示在某些警报或弹出窗口中，那将是另一回事。您的问题并不具体是您希望如何获得 css。

【讨论】：