jQuery. Why are none of my css class values present when I assign a css class?

Question

I create and append a div with an id:

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

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

I now want to attach this css class to the child div:

.igv-top-left-width {
    position: absolute;
    top: 128px;
    left: 256px;
    width: 512px;

}

I use jQuery to assign the css class:

$('#classyDivID').addClass('.igv-top-left-width');
console.log($('#classyDivID').css('left'));

When I echo the css class values I get complete nonsense values. For left I get auto. Huh? Whah?. As if I am referring to some other random css class. What am I doing wrong here?

Remove the period. addClass expects a class name, not a selector. What you're currently doing is equivalent to <div class=".class-name">. — Blender
– Blender, Commented Mar 4, 2014 at 2:31

Felix · Accepted Answer · 2014-03-04 02:32:41Z

3

Try to change:

$('#classyDivID').addClass('.igv-top-left-width');

to:

$('#classyDivID').addClass('igv-top-left-width');

You don't need the . to add the class here

answered Mar 4, 2014 at 2:32

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dugla Over a year ago

No joy. var cssClassName="igvTopLeftWidth"; $('#classyDivID').addClass(cssClassName); and console.log("top") echos the word auto. console.log("width") echos 1184px. Sigh.

Felix Over a year ago

Can you create a fiddle to replicate your problem?

dugla Over a year ago

Got it, it works fine. Here is the fiddle: jsfiddle.net/dugla/74eeC. The problem had to do with the fact I was running inside a unit test (jQuery QUnit). I'll give this one to you Felix for the suggestion. Cheers.

Collectives™ on Stack Overflow

jQuery. Why are none of my css class values present when I assign a css class?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related