CODEWITHSUNDEEP
javascriptjquerycssdom
Milo
Milo

Reputation: 13

How to find the css file name associated with an element?

I am not sure that it's possible, but I want to know after clicked an element ( div or...) the css file name associated of this element.

example

<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>

When I click on this div I need to know from what css file name the style of div.my_class is associated style_1.css or style_2.css

Upvotes: 1

Views: 5135

Answers (5)

Aneesh Mohan
Aneesh Mohan

Reputation: 1087

//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);
                }
            }
        });
    }

You have to find the file name from the path text. It will work for only the style sheets loaded from same domain. i.e wont work if you are loading style sheets from cross domain.

-- Originally adaptation of an answer here & Find the updated fiddle here.

Upvotes: 2

Macsupport
Macsupport

Reputation: 5444

Actually, if you are just interested in knowing the css style of any div, you can do it pretty easily. In Firefox, right click on the element and select "inspect element". You will see the css in the inspector and it will tell you on what line and in what css file it is located in. Likewise in Chrome or Safari, inspect element does the same thing. I'm not a Windows user but I would guess F12 in IE shows you as well. If you want it to show in some alert or popup when you click, etc. , that would be a different story. Your question is not specific how you want to get the css.

Upvotes: 0

Arvigeus
Arvigeus

Reputation: 373

1) You can use a web browser, right click on element, and select 'Inspect element' (don't try IE). It lists styles and where they come from. 2) I haven't worked with Brackets editor, but I know there is option 'Quick Edit' that shows associated styles to given element. Not sure if it shows source file.

Upvotes: 0

Farkhat Mikhalko
Farkhat Mikhalko

Reputation: 3645

I think it is possible by using javascript, the idea is next (just prototype):

Check all links on page and try to get css files via ajax

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);

I think it is possible, but some limits: for example allow origin.

Addition: Also you must understand that css styles can be in the same page with element. So you must check styles tags on page.

Upvotes: 0

Oneezy
Oneezy

Reputation: 5013

If I were you, I'd use Chrome's developer tools:

1.) Open page you want to edit in Chrome
2.) Right click and click "inspect element"
3.) Look to the right inside the developer tools and you can see the css file associated.

In this example you can see that the style for your name "Milo" is located in the "all.css" file

enter image description here

Upvotes: 0

Related Questions