2013-07-10 2 views
0

После создания Div 'MyParent', и множество дочерних элементов с разной шириной & высоты добавляются в этот «MyParent». К концу я хочу узнать конечную ширину & height of 'MyParent' в пикселях. Я использовал знакомые функции, чтобы получить ширину &, я получил 0 во всех попытках.Получите ширину и высоту div после добавления к нему дочерних элементов

Вот простой код:

var myPrt = document.createElement('div'); 
var C1 = document.createElement('div'); 
var C2 = document.createElement('div'); 
var C3 = document.createElement('div'); 

myPrt.appendChild(C1); 
myPrt.appendChild(C2); 
myPrt.appendChild(C3); 

$(C1).css({position:absolute;left:-100px;top:100px;width:100px;height:50px;background:red}); 
$(C2).css({position:absolute;left:100px;top:-100px;width:75px;height:50px;background:yellow}); 
$(C3).css({position:absolute;left:150px;top:200px;width:90px;height:50px;background:black}); 

$(myPrt).height(); // returns 0 
$(myPrt).css('height') // returns 0 
$(myPrt).innerHeight(); // returns 0 
$(myPrt).outerHeight(); // returns 0 
myPrt.clientHeight; // returns 0 

В простой способ получить это?

Поскольку на самом деле я нашел решение этой проблемы, но он действует в Childs, создайте цикл, в котором вы выбрали все дочерние элементы Parents Childs, а затем получите максимальный левый и минимальный левый из этих дочерних элементов, затем он возвращает расстояние между минимумом & max и тем же концом для высоты, получая максимальную/максимальную вершину, однако этот наконечник нуждается в том, чтобы дети имели абсолютное положение, чтобы получить там left/top, ищем существующую функцию jquery или javascript, которая делает что без абсолютного положения для детей.

Благодаря

ответ

0

Взгляните на эту JSFiddle, ты просто неуклюжий, я думаю. Вы никогда не добавляли div myPrt в документ для одного.

Другая проблема заключается в том, что вы не передаете css как правильно форматированный словарь javascript со строковыми переменными.

http://jsfiddle.net/FcSEG/1/

var myPrt = document.createElement('div'); 
$('body').append(myPrt); 

var C1 = document.createElement('div'); 
var C2 = document.createElement('div'); 
var C3 = document.createElement('div'); 

myPrt.appendChild(C1); 
myPrt.appendChild(C2); 
myPrt.appendChild(C3); 

$(C1).css('width','500'); 
$(C1).css('height','500') 
$(C1).css('background','red'); 

alert($(myPrt).height()); 
+0

Negative, тестирование myPrt.outerWidth, myPrt.innerWidth возвращаются Nothin, $ (myPrt) .innerWidth(), $ (myPrt) .outerWidth() возвращают 0. – crazyosachou

+0

Опубликуйте фактический css, который вы используете, затем – RutledgePaulV

+0

Вы пробовали только myPrt.width; .. правильно? – RutledgePaulV

Смежные вопросы