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 do i remove li element margin

    how to avoid bullets showing in main menu

    How do I have the div displayed without having text content?

    How to normalize a button and an anchor with CSS?

    How to adapt height of an element to another in CSS

    How to make a barlike chart but only with html and css [closed]

    How to prevent span from growing with content

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to create desired form with css without using too many div tags?

    How to create responsive text on top of an image?

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How to collapse div same like facebook chat

    How to dynamically change css style based on INPUT value?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to add Video from project directory in the background of Div

    How do I load a nested web page in a
    tag using only javascript and html?

    How to prevent CSS inline style when Browser Zoom in?

    How to make the headline (H1 with lines on the sides) with CSS only

    How to align submenu to the left of container

    How to determine the 'toggle' status of a CSS toggle input?

    How can i apply background-image to low div

    How to apply css to particular selected child in ivh-treeview?

    How to check if Html element has a background-image css property in WebBrowser control C#

    How to create a responsive popup using fancybox 2?

    CSS: how to have reposition relative to a centered background image

    css animation how to get the ball to bounce

    How to center a relative div in my case?

    How can I track down a:hover jquery source?

    How to change the CSS of the active toggle button using pseudo CSS transitions

    How to Include marker in SVG Blinking Rectangular or circle Border image in google maps