使用appendchild属性在div中追加元素

时间:2015-05-19 07:47:19

标签: javascript html css

我有一个div:

<div id="div1" width="100px" height="100px">

</div>

现在在这个div中我想放置20个元素,但动态它也可以增长到50个元素(图像)。

我使用以下代码将这些元素附加到div中,

var i = document.createElement("img");
var d= document.getElementById("div1");
d.appendchild(i);

现在,问题是,随着元素数量的增加,元素将超出div,如果我在图像上使用max-width和max-height,结果不会改变:

i.setAttribute('max-width', '100%');
i.setAttribute('max-height', '100%');

我有什么遗失的吗?

编辑: 当div大小固定时,图像需要缩小

3 个答案:

答案 0 :(得分:2)

如果宽度固定且高度是动态的。图像会缩小,它们会堆叠起来。检查我的小提琴here

img {
    width:100%;
    display:inline-block;
}

<div style="width:100px;border: 1px solid black;">

    <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
    <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
    <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />

</div>

答案 1 :(得分:2)

无法用百分比来思考一个很好的方法,

var imags = document.getElementsByTagName('img');
var count = imags.length;
for (var index= 0,l= count;index<l;index++){
    imags[index].setAttribute('height', (100/count)+'%');;
}

它不漂亮,但应该有用。

答案 2 :(得分:2)

我从符合您需求的所有答案(如果我理解正确的话)中将某些东西放在一起

https://jsfiddle.net/b30d88g6/3/

div有固定的宽度/高度,图像不会离开div

function add_img() {

    var i = document.createElement("img");
    i.src= "https://jsfiddle.net/img/logo.png";
    var d= document.getElementById("div1");
    d.appendChild(i);

    var imags = document.getElementsByTagName('img');
    var count = imags.length;
    for (var index=0, l=count;index<l;index++){
        imags[index].setAttribute('height', (100/count)+'%');;
    }
}