javascript - 动态调整多个DIV的大小

Question

我正在使用 javascript 在 html 页面上显示 json 响应。响应可能包含多个结果以及每个结果对应的一个链接。我正在动态显示这个。

代码是：

var response=eval('(' + request.responseText + ')');

        for(i=0;i<response.items.length;i++)
        {

            var innerDivElement=document.createElement('div');
            divElement.appendChild(innerDivElement);
            innerDivElement.setAttribute("id", response.items[i].link);
            innerDivElement.setAttribute("title","link_attr");
            innerDivElement.setAttribute("class","links");
            innerDivElement.innerHTML=response.items[i].link;
        }

这里所有的 DIV 都具有相同的高度和宽度。我想根据其 innerHTML 的大小调整 DIV 的大小。如何做到这一点？

Answer 1

首先，你真的应该尝试使用像 jQuery 这样的 JavaScript 框架。例如，eval() 函数就不是很安全。但不管怎么说：

如果您在 CSS 中为包含内部元素的 DIV 设置了一个较低的 min-height 和 min-width 值，它将在需要时自动拉伸。

JS方式：

divElement.setAttribute("class", "innerElementHolder");

或者，如果您要从 HTML 页面中检索此 divElement，只需添加：

class="innerElementHolder"

到包含您在 JS 中创建的所有元素的 DIV。

innerElementHolder CSS 应该类似于：

.innerElementHolder {
    min-height: 10px;
    min-width: 10px;
}