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的样式与style_1.css或style_2.css

的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＆amp;找到更新的小提琴here。

Answer 2

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

1。）打开要在Chrome中编辑的页面
2。）右键单击并单击“检查元素”
3。）在开发人员工具中右侧查看，您可以看到关联的css文件。

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

enter image description here

Answer 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样式可以与元素在同一页面中。所以你必须检查页面上的样式标签。

Answer 4

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

Answer 5

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

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

5 个答案: