js设置无法自动增高的元素高度（div、dldtdd）

用 javascript 操作网页，随着元素的增减，网页随之变长变短，而元素又必须事先设置一个高度值，也就是元素不能设置为自适应高度；问题来了，由于高度有限，新增加的元素会被遮挡而看不见或者只能看见一部分，这时就需要用 js 来设置元素当前的高度，以显示新增加的元素。

上面说的情况多见于用 js 提交上传图片，图片上传完成后需要把上传的图片显示于客户端让用户看到已上传的图片，假如一行规定显示五张图片，也就是用于显示上传后的图片的元素（如 div 或 dldtdd）事先设置为一张图片的高度，如果上传图片超过五张，则会自动显示到第二行，由于高度不够，第二行的图片就会被遮挡或者显示变乱。

一、js设置无法自动增高的元素高度之div

假如有用于显示上传后的图片的 div 如下：

<div id="divId" style="height:200px;"><img src="图片地址" /></div>

若图片的高度为200，div 一行只能显示五张图片，则第六张图片会自动显示到第二行，由于 div 的高度只有一张图片的高度200，所以第六张图片要么被庶挡要么显示变乱，此时就需用 js 把 div 的高度设置为400，设置的 js 方法如下：

function setNewHeight() {
    var obj = document.getElementById("divId");
    var images = obj.getElementsByTagName("img");
    var n = parseInt(images.length / 5);
    if (images.length % 5 != 0) {
      n++;
    }
    var h = 200 * n;

  if (obj.Document) {
      obj.style.height = h;
    }
    else {
      obj.style.height = h + 'px';
    }
  }

这个方法在上传的图片每超过五的倍数就会自动把 div 的高度增加200，例如上传到第六张图片时，它把 div 的高度设置为 400，上传到第11张图片时，它会把 div 的高度设置为600，依次类推。如果每行显示六张图片，则只需要把 setNewHeight() 方法中的5改为6即可。

二、js设置无法自动增高的元素高度之dldtdd

在网站后台上传图片更多的显示于 dldtdd 中，因为常常用它替代 table 做表格，而 dl 中的 dt 和 dd 又必须设置高度，否则边框显示不正常，这就是不能事先把 dt 和 dd 设置为自适应高度的原因。若有用于显示上传图片的 dldtdd 如下：

<dl><dt style="height:200px;">上传后的图片：</dt><dd style="height:200px;"><ul><li><img src="图片地址" /></li></ul></dd></dl>

情况跟 div 一样，直接调用上边的 setNewHeight() 方法，就能随着图片成五的倍数增长而自动调高 dt 和 dd 的高度。