can not get the width of the html element

I create an element using js,and I have imported the related css,however I can not get the width of the element,this is the code:

css:

#mainDiv{
  position:absolute;
  width:500px;
  height:500px;
}

js:

var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);

//now I want to get the width of the 'mainDiv'

var wd=mainDiv.style.width;
console.info(wd);

However the value of the 'wd' is always ''.

I wonder why?

Using the firebug,I found that the width of the 'mainDiv' is 500px.

But why I can not get the value in the js?

I do not want to set开发者_运维百科 the width and height of the 'mainDiv' in the js like:

mainDiv.style.width='500px';

I want to set the size in the css.

Any idea?

try

var wd=mainDiv.clientWidth;

Use mainDiv.offsetWidth .

Hope this helps.

Listen, this is an awful answer, but just use jQuery.

If you did this would be as simple as:

var width = $('#mainDiv').width(); // width has the value 500

Docs: http://api.jquery.com/width/

In order to get the actual width of a DOM element you must use offsetWidth.

From W3Schools:

offsetWidth: Returns the width of an element, including borders and padding if any, but not margins

This example should work:

var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);

var wd=mainDiv.offsetWidth;
console.info(wd);

It's because the element is not yet rendered. I know it's awful, but you should delay reading the width a bit:

var mainDiv=document.createElement("div");
mainDiv.setAttribute("id","mainDiv");
document.body.appendChild(mainDiv);
setTimeout(100, function() {
    console.info(mainDiv.style.width);
});

You cannot get the width because you are trying to get it from the style. Sorry went into train, basically because you are not setting the style element but rather defining a class - JavaScript can't read the value from the element.