dynamisch die Größe mehrerer DIVs anpassen

Question

Ich zeige die JSON-Antwort auf HTML-Seite mit Javascript. Antwort kann mehrere Ergebnisse und einen Link für jedes Ergebnis enthalten. Ich zeige dies dynamisch.

-Code hierfür lautet:

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; 
     } 

Hier werden alle DIVs gleiche Höhe und Breite haben. Ich möchte die Größe von DIV abhängig von der Größe von innerHTML anpassen. Wie kann das gemacht werden?

Answer 1

Zuerst sollten Sie wirklich versuchen, JavaScript Frameworks wie jQuery zu verwenden. Die Funktion eval() ist beispielsweise nicht sehr sicher. Aber trotzdem:

Wenn Sie im CSS für das DIV, das die inneren Elemente enthält, eine Mindesthöhe und eine Mindestbreite auf einen niedrigen Wert setzen, wird es bei Bedarf automatisch gedehnt.

Die JS Art und Weise:

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

Oder, wenn Sie diese DivElement aus einer HTML-Seite abrufen, fügen Sie einfach:

class="innerElementHolder" 

an den DIV, die alle Elemente hält Sie in Ihnen JS erstellen.

Die innerElementHolder CSS etwas sein sollte wie:

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