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


Tags: javascript,jquery,css,dom

Problem :

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



Solution :

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


    CSS Howto..

    How to re-size and crop an image client side while maintaining the aspect ratio

    How to distribute p:menuitems in p:menubar accordingly?

    How to make div disappear when clicking outside?

    How do I install SASS with Mean.io?

    How to resize two divs on the click of a link

    How to put bull inside css circle

    How to pick with css multiple select tags that has at least one option selected?

    HTML CSS How to stop a table to put the content after it on a new line?

    How do I slow down the banner transitions on my homepage? CSS

    How to stretch images with no antialiasing

    how to remove 2nd 0r 4th div padding with Pure CSS not jquery

    How to inherit from ancestor and not parent in CSS?

    How do I use CSS to reposition this image?

    How to create tooltip with one element in CSS

    How to display thick line under header of sub menu using css

    CSS Help - How can a DIV ignore css previously set on the page?

    How can I transition height: 0; to height: auto; using CSS?

    how to align an image, bottom right of table cell by using css?

    CSS: how to make a horizontal images scroller with two images per column?

    How do I organize imports in Compass/Blueprint?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    CSS height, How to get it to go around inner divs

    How to make image scale as per browser window?

    How to make div's inside div responsive

    how do I use the :valid and :invalid selectors for css?

    How to add spacing between checkboxlist items?

    css - How to set fixed width of div that is display:inline

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    How to display a div's name with jquery and css

    CSS how can i turn the scrolling off during the animation?