Javascript sets the element height that cannot be automatically increased(div, dldtdd)

Operate the webpage with javascript. As the elements increase or decrease, the webpage becomes longer and shorter, and the element must set a height value in advance, that is, the element cannot be set to an adaptive height; the problem comes, because the height is limited, the newly added elements will be blocked from view or only part of it, then you need to use javascript to set the current height of the element to display the newly added elements.

The situation mentioned above is more common when submitting to uploaded images with javascript. After the image upload is complete, it needs to be displayed on the client to let the user see it. If display five images in a line, that is, the element used to display the uploaded image (such as div or dldtdd) is set to the height of an image in advance. If more than five images are uploaded, they will be automatically displayed in the second line. Because the height is not enough, the images in the second line will be blocked or displayed disorderly .

1. Javascript sets the div height that cannot be automatically increased

If there is a div for displaying the uploaded image as follows:

<div id="divId" style="height:200px;"><img src="The image's address" /></div>

If the height of image is 200, and a line in div can only display five images, the sixth image will be automatically displayed in the second row. Since the height of div is only one image, the height of image is 200, so the sixth image is either blocked either the layout becomes messy, at this time, you need to use javascript to set the height of div to 400. The javascript method is as follows:

function AutoIncreaseHeight() {
              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';
              }
       }

This method automatically increases the height of div by 200 every time the uploaded image exceeds a multiple of five. For example, when uploading to the sixth image, it sets the height of div to 400, and when uploading to the 11th image, it will set the height of div is set to 600, and so on. If six images are displayed per line, you only need to change 5 to 6 in the AutoIncreaseHeight() method.

2. Javascript sets the dldtdd height that cannot be automatically increased

Uploading images in the background of website is more displayed in dldtdd, because it is often used to replace the table tag as a table, and dt and dd in dl must be set to the height, otherwise the border display is not normal, this is the reason why dt and dd cannot be set to adaptive height in advance. If there is a dldtdd for displaying uploaded images as follows:

<dl><dt style="height:200px;">The uploaded image: </dt><dd style="height:200px;"><ul><li><img src="The image's address" /></li></ul></dd></dl>

The situation is the same as that of div. Directly calling the AutoIncreaseHeight() method above will automatically increase the height of dt and dd as the image grows in multiples of five.