javascript unable to get style after setting css class

Question

I have a cell class

  .cell {
    width:30px;
    height:30px;
  }

In my createCell function:

  var createCell = function(id) {
    var div = document.createElement('div');
    div.id = id;
    div.className = 'cell';
    div.addEventListener('click', function() {
      div.style.background = pickedColor;
    });
    document.getElementById('gridArea').appendChild(div);
  }

as you can see, i have already assigned className to 'cell'. After calling this function, I call

document.getElementById(id).style.width

It returns empty string ""

Why is it so? how can I retrieve the value immediately after assigning the className?

Rolled back your question, please don't modify the code in the question otherwise an answer which was originally valid will look invalid. If it didn't fix the issue comment on the answer or add the updated code below the question. — Script47
– Script47, Commented Oct 10, 2015 at 0:01
Because .style is only for the styles directly on that element, styles from a class doesn't count in that case. — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 10, 2015 at 0:06

Barmar · Accepted Answer · 2015-10-10 00:06:08Z

2

You need to use getComputedStyle to get styles that come from CSS. .style just accesses the style attributes of the DOM element.

width = getComputedStyle(document.getElementById(id)).width;

answered Oct 10, 2015 at 0:06

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

Comments

James Henry · Accepted Answer · 2015-10-10 00:05:05Z

0

If your underlying goal is to access the width of the element, you should use its .offsetWidth property.

style.width will only have a value if one has been set using the style attribute, not via the application of CSS classes.

Try document.getElementById(yourIdHere).offsetWidth

answered Oct 10, 2015 at 0:05

James Henry

8446 silver badges12 bronze badges

Comments

Script47 · Accepted Answer · 2015-10-10 00:06:51Z

0

You don't assign the id parameter the the id of the actual element anywhere.

What you need to do is this,

div.id = id

Edit 1

You need to use getComputedStyle.

alert(getComputedStyle(div).width);

The JSFiddle shows how.

http://jsfiddle.net/kvohdnbn/

edited Oct 10, 2015 at 0:06

answered Oct 9, 2015 at 23:58

Script47

14.6k4 gold badges49 silver badges69 bronze badges

Collectives™ on Stack Overflow

javascript unable to get style after setting css class

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related