Question

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?

Answer 1

try

var wd=mainDiv.clientWidth;