HTML5 CSS Class. Is there now way to inspect the values of a css class?

Question

I am try to do something I thought was trivial but appears impossible: print the values of a css class associated with a div. Should be easy. Not for moi.

Your task: Using console.log() echo the value of top (or left or height, etc.) for the class associated with a div.

What am I missing?

UPDATE

Ok, more context:

Using pure Javascript - no JQuery I have done the following to create a div. insert it in the DOM, and assign a class to it:

// css class name
var sequenceDivClassName="igv-sequence-div",

classyDiv = document.createElement('div');
classyDiv.setAttribute('id', classyDivID);

parentDiv = document.getElementById(parentDivID);
parentDiv.appendChild(classyDiv);

document.getElementById(classyDivID).className = sequenceDivClassName;

Here is what the CSS class looks like:

.igv-sequence-div {
    color:red;
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width:100%;
}

I am doing all this in a Qunit unit test and I would like to do an assertion on the height. How do I access the height field of the class so I can using it in an assertion - equal(...).

Is there a reason to use the console rather than the browser's web inspector? — nwalton, Mar 03 '14 at 21:01
possible duplicate of: http://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript — Nico O, Mar 03 '14 at 21:01
You can get the computed styles, but I'm not sure you can isolate it to a specific class. — technophobia, Mar 03 '14 at 21:03

score 2 · Answer 1 · answered Mar 03 '14 at 21:02

2

HTML classes do not have CSS rules directly associated with them.

CSS rule-sets come with selectors. These could be made up of a single simple selector (which might be a class selector) or multiple selectors (or even groups of multiple selectors).

Multiple rule-sets can have selectors that match the same element. The CSS rules that actually apply to a given element are determined by a combination of the cascade and inheritance.

You can find out the particular rules associated with an element using getComputedStyle.

You can get a list of all the rules associated with a document by looping over document.styleSheets then looping over the rules property of the each of the results. You can then examine the selectorText property to see if it matches a given class selector.

answered Mar 03 '14 at 21:02

Quentin

914,110
126
1,211
1,335

Not parsing this Quentin. I have a div. The div has a CSS class. I want to print a member of the class. This must me easy, no? – dugla Mar 03 '14 at 22:17
The div does not have a CSS class. It is a member of an HTML class (or maybe more than one, or none). There might be a CSS rule-set with a class selector that matches one of the classes on the element. Or multiple classes. Or multiple rule-sets that match. – Quentin Mar 03 '14 at 22:18
since I am leaning to jQuery I went with Aaron's answer although your solution is the correct pure Javascript way to go. – dugla Mar 03 '14 at 22:51

score 0 · Accepted Answer · answered Mar 03 '14 at 21:03

0

Ive got it. Can you use jQuery? It makes it super easy. I did it with an alert. I dont like console.logs. Personal preference.

alert($(".whatever").css("left"));

Fiddle Bro!

answered Mar 03 '14 at 21:03

thanks for this. +1 for the jsfiddle. So, our project is trying to remain pure Javascript. Damn that looks trivs in jQuery. Maybe we should relent. Cheers. – dugla Mar 03 '14 at 22:01
1

That will get the left property of the computed style of the first element which is a member of the `whatever` class. That style may or may not come from a rule-set with a `.whatever` class selector on it. The same effect can be achieved with `getComputedStyle` as per my answer. – Quentin Mar 03 '14 at 22:21
I hear ya @Quentin. Gettin' there. The stark difference between jQuery's obvious programming model and the pure Javascript gymnastic weirdness is one helluva selling point to throw in the towel and go all jQuery. Cheers. – dugla Mar 03 '14 at 22:52

HTML5 CSS Class. Is there now way to inspect the values of a css class?

UPDATE

2 Answers2