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(...).

Answer 1

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!

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