Find CSS rules of an individual class

Question

If I have an element -

<div class="myDiv"></div>

myDiv has some rules applied to it -

.myDiv {
    background:red;
}

I then apply another class to myDiv -

$('.myDiv').addClass('newClass');

There's a definition in my css like this -

.myDiv.newClass{
    position:relative;
    left:20px;
}

How can I find out what rules apply specifically to $('.myDiv.newClass')? I would like a function that returns an object with the css rules in.

The result would be something like this -

{
    "position":"relative",
    "left":"20px"
}

http://stackoverflow.com/questions/1004475/jquery-css-plugin-that-returns-computed-style-of-element-to-pseudo-clone-that-el — Dave, Jun 18 '12 at 11:34

score 0 · Answer 1 · edited Mar 20 '17 at 10:04

0

I do not want return any rules that apply only to .myDiv

In which case you should remove this class from your element and change your CSS structure:

$('.myDiv').addClass('newClass');    
$('.myDiv').removeClass('myDiv');

Then change:

.myDiv.newClass {}

to:

.newClass {}

If you need to see what styles are now being applied to that div, you can "Inspect Element" using Google Chrome or FireBug.

edited Mar 20 '17 at 10:04

Community

answered Jun 18 '12 at 12:01

Curtis

1

Does `$('.myDiv').addClass('newClass');` really works ? You don't have `myDiv` class anymore at this point. – zessx Jun 18 '12 at 12:05
Thanks for your answer, I was unclear in my question. I've edited to show what I'd like returned. – Finnnn Jun 18 '12 at 12:53

score 0 · Answer 2 · answered Jun 18 '12 at 12:06

0

window.getComputedStyle() maybe what you are looking for - https://developer.mozilla.org/en/DOM/window.getComputedStyle

answered Jun 18 '12 at 12:06

techfoobar

score 0 · Answer 3 · answered Jun 18 '12 at 12:17

0

a very nice article about fetching the styles - browser compatible

The above given like is a generalised solution to your problem.

answered Jun 18 '12 at 12:17

Vivek Chandra

3 Answers3