How to take the height of the div, leasing it to the nearest multiple of 24 and apply the result in the style="height" of the div itself?

Asked

Viewed 9,060 times

7

I need a script that does just that: get the height of the div, round it to the nearest multiple of 24 and apply the result in the style="height" of own div.

It needs to be pure Javascript, no Jquery.

Follows the structure of HTML

<div id="minhadiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id vulputate enim. Aenean venenatis magna non nisl elementum, a pellentesque metus semper. Integer porta diam consectetur, pretium odio sit amet, euismod urna. Quisque vel dui nec ligula iaculis malesuada et nec magna. Donec turpis nulla, viverra id sem nec, malesuada dictum leo.
</div>

To div has a height: auto, but it needs to have the height rounded in multiples of 24 since the content is dynamic.

For example: if the content of div left her with 40px height, then the script should leave it with 48px height, which is the closest 24 multiple (24*2 = 48px).

Then I’d be like this:

<div id="minhadiv" style="height: 48px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id vulputate enim. Aenean venenatis magna non nisl elementum, a pellentesque metus semper. Integer porta diam consectetur, pretium odio sit amet, euismod urna. Quisque vel dui nec ligula iaculis malesuada et nec magna. Donec turpis nulla, viverra id sem nec, malesuada dictum leo.
</div>

Now case to div take 54px height, the script would also leave with 48px (rounded to multiples of 24). In this case, the div already has in the CSS file the overflow: auto, since the content will exceed the size that the script defined.

javascript

  • The adjustment part itself is not so complicated, but some details are missing from your question. The technique to solve this depends on a number of factors, especially where the div is being changed. Adjusting the height by itself can give a lot of cascading effects on the entire layout, including with problems with scrollbars, if it affects the entire page. It would be like putting the basic structure of html?

  • Thanks for the reply @Bacco, I edited the question, see there.

1 answer

5

You can use these two to catch the height of the div:

var alturaAtual = document.getElementById('teste').clientHeight;

or

var alturaAtual = document.getElementById('teste').offsetHeight;

the difference of offsetHeight to the clientHeight is that it returns the height including the padding, border and scrollbar. You must analyze which is best for your situation.

I’m not sure what you want but I did a function to change the height in multiples of 24.

HTML CODE

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="teste" style="height: 65px;"></div>
</body>
</html>

SCRIPT [UPDATED]

function mudaAltura(idDiv) {
    var alturaAtual = document.getElementById(idDiv).offsetHeight;
    if (alturaAtual % 24 !== 0) {
        var resultado = parseInt(alturaAtual / 24);
        var novaAltura = 24 * (resultado + 1);
        document.getElementById('teste').style.height = novaAltura + "px";
    }
}

Ai you call the function by setting the ID of the DIV as parameter. Ex.: mudaAltura("minhaid");

  • I put your code on jsfiddle worked right.

  • Perfect! It worked out great, I’m saved! Thanks @williamhk2

  • Glad you could help! D

  • 1

    Good solution! I have just one suggestion: it would be better to change the style.height instead of using setAttribute, so you don’t overwrite any existing styles in div.

  • Wow, I did some tests here on the jsfiddle @Euler01 did and didn’t overwrite the styles. In this case, overwrite only the height for the new height.

  • It’s just that his styles are all in CSS. If there’s any more inline style, your code overwrites (since it rewrites the entire style attribute).

  • Ah, I get it. I’m going to put another option in the answer. thanks @bfavaretto!

  • 1

    Updated code.

  • It would be like a version of this code working with class instead of ID @williamhk2?

  • I’ll check here

  • @Boçal I researched well here on the internet but I could not find a way to work changing the height of an element using class. I even did some tests with getElementsbyClassName but I can’t get the height of the div or change it through this method. You can even put an id with the same class name that you are using only to avoid trouble in the code, but I believe it would not be a best practice.

Show 6 more comments

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.