clientWidth при инициализации элемента 0

[digitalbrain]

Здравствуйте! Есть класс для создания никого элемента интерфейса пользователя. Элемент создается по нажатию мышки. Размеры задаются через CSS

function Box(Class){
  var obj=this;
  this.Class=(Class)?Class:'Def';
  this.body=document.createElement('div');
  document.body.appendChild(this.body);
  this.body.className=this.Class;
  this.body.setAttribute('data-GUIclass','Seeker');
 
  this.h=this.body.clientHeight;//оно 0
  this.w=this.body.clientWidth;//оно тоже 0
}
var Box=new Box();

ну если чуть позже опросить размеры то все нормально.

что делать? Оо размеры нужны для формировании остальных элементов( Помогите)

[monolithed]

Есть класс

В js нет классов!

что делать?

В чем суть вопроса-то?

document.body.appendChild(this.body);

не поторопились закрыть?!

[digitalbrain]

В js нет классов!

Ну может привычных и нет не С++ же но псевдоклассы таки есть.
Нужно получить размеры div что создается в "конструкторе" ну или просто в теле функции Box. В Css для этого div задано width:100px;height:100px; допустим. Как мне их получить внутри функциии Box? Они там 0 почему то.

[digitalbrain]

не поторопились закрыть?!

Извините за непонятливость, но что то я не понял в чем там проблема (? Я конечно эту строку вставил только для того что бы показать что div вставляется в DOM дерево , но на самом деле там просто еще один div-родитель.

[monolithed]

Найдите два отличия и пойми почему так получается:

<style type="text/css">
.name {
    border: 1px solid;
    float: left;
    margin: 5px;
    text-align: center;
    width: 100px;
    height: 22px;
}
</style>

<script type="text/javascript">
window.onload = function(){
    document.onclick = function(){
       (new function(){
           this.create = function(name){
               var div = document.createElement('div');
               div.className = name ? name : 'def';
               var width = window.getComputedStyle(div, null).width || div.currentStyle.width;
               var height = window.getComputedStyle(div, null).height || div.currentStyle.height;
               div.innerHTML = width + ' / ' + height;
               div.setAttribute('data-GUIclass','Seeker');
               return document.body.appendChild(div);
           };
           return this;
        }).create('name');
    };
};
</script>

<style type="text/css">
.name {
    border: 1px solid;
    float: left;
    margin: 5px;
    text-align: center;
    width: 100px;
    height: 22px;
}
</style>

<script type="text/javascript">
window.onload = function(){
    var object = new function(){
       this.create = function(name){
           var div = document.createElement('div');
           div.className = name ? name : 'def';
           div.setAttribute('data-GUIclass','Seeker');
           return document.body.appendChild(div);
       };
       return this;
    };

    document.onclick = function(){
        object.create('name');
        var div = document.getElementsByTagName('div'), i = div.length;
        while(i--){
            div[i].innerHTML = div[i].clientWidth+'px' + ' / ' + div[i].clientHeight+'px';
        }
    };
};
</script>

[digitalbrain]

Интересное решение) Но почему то в Chrome не пашет -"Cannot read property 'width' of undefined" , но в FF все норм... будем разбираться..Спасибо за Ваши труды! Респект!

[monolithed]

Но почему то в Chrome не пашет

переименуйте свойства, если не поможет, то Chrome в принципе ругается верно, т.к. элемент еще не создан. Поэтому второй вариант предпочтительней.

[digitalbrain]

Вот блин, не в том была собака зарыта у меня. Смотрю же что у Вас свойства clientWidth нормально возвращают размеры в теле , стал рыть что ж не так с моим кодом. Оказалось на момент использования этих свойств div привязан к родителю div другого объекта , но div-родитель вставляется в DOM позже ...выходит цепочка с div не приатачена никуда еще, когда я вызываю clientWidth и возвращает 0. Хотя я не понимаю почему не может браузер дать размеры объекта который не в DOM дереве пока. Единственый выход сразу все атачить к document.body, а потом переатачить куда надо..Спасибо )

[Kolyaj]

Хотя я не понимаю почему не может браузер дать размеры объекта который не в DOM дереве пока.

А как он будет считать размеры элементов, которых нет в дереве? На размеры же влияют соседние элементы.

[digitalbrain]

ну можно было бы считать размеры на основе CSS правил для него, что применяются для элемента в независимости от родителей элемента div.Class1{}, все ровно бы переменялся к div с классом Class1, где бы не стоял он в DOM, а потом когда бы вставляли в DOM его пересчитать размеры...Короче меня бы в разработчики браузеров ))))