动态添加子元素后，无法获得正确的div高度？

我有一个ID为div1的主DIV。我在文档加载事件中的div1中添加了一些子元素（div，表格等）。但是当我在添加子元素后检查div1的高度时，高度没有改变。请帮我...动态添加子元素后，无法获得正确的div高度？

//HTML code for main DIV 
    <div id='div1' style="height: 10px">&nbsp;</div> 

//Javascript in Document Load event 
var div1 = document.getElementById('div1'); 
var child1 = document.createElement('div'); 
child1.setAttribute('style', 'height:50px'); 
div1.appendChild(child1); 
var height = $("#div1").height(); 
alert(height);//value of height is 10px NOT 50px

来源

2015-04-29 Tony

尝试'div1'上的'height：auto' – Akshay

感谢您的回答Akshay。把父母的工作，但在我的项目中，我应该添加n个子元素作为树（一个在另一个孩子之下）不同高度。那么是否有其他解决方案，请不要放高度自动？ – Tony

或者你也可以尝试'min-height：10px;''div1'' – Kinburn101

疗法是一个错字，更换您的可变高度与var height = $("#div1").height();

来源

2015-04-29 04:27:46 stanze

谢谢。写在这里是我的错误。编辑。 – Tony

试试这个。

http://jsfiddle.net/devkickstart/jzeg0k4u/

//HTML 
<div id='div1'>&nbsp;</div> 
//CSS 
#div1{ 
    height: auto; 
    min-height: 10px; 
} 
//JS 
//Javascript in Document Load event 
var div1 = document.getElementById('div1'); 
var child1 = document.createElement('div'); 
child1.setAttribute('style', 'height:50px'); 
div1.appendChild(child1); 
var height = $("#div1").height(); 
alert(height);//value of height is 10px NOT 50px

尽量不要使用内嵌样式属性。

- 编辑 - 您可以优化您的js像下面

var div1 = $('#div1'); 
var child1 = document.createElement('div'); 
$(child1).css('height', '50px'); 
div1.append(child1); 
var height = div1.height(); 
alert(height);

来源

2015-04-29 04:30:22 Aakash

你可以试试这个：

child1.style.height= "50px";

child1.setAttribute("style", "height: 50px;");

来源

2015-04-29 05:22:58 Atharva

你喜给了height: 10px这是固定的，所以它不会改变。而不是使用高度使用min-height: 10px。这样，如果添加新的小孩，高度会自动增加。

来源

2015-04-29 05:33:47

动态添加子元素后，无法获得正确的div高度？

回答

相关问题