Setting the height on an element dynamically, in Javascript

Question

I am trying to set the height of an element dynamically, so that when the document first opens, the element takes up the whole screen (adjusted for other elements on the screen - not shown in the snippet below).

I am using JQuery in my code, and the code shown below is called after the document is loaded as per the standard JQuery pattern:

$(function({ 
    /* called here! */
});

However, I found that the results are the same - with or without JQuery, so for simplicity of the code, I have shown code that using jQuery:

<style>
  #foo {
    border: 1px solid red;
  }
</style>
<div id="foo"></div>
<div id="foobar"></div>
<script>
  const elem = document.getElementById('foo');
  console.log('Element:' + elem);
  console.log(`Before: ${elem.style.minHeight}`);
  elem.style.minHeight = 1500;
  console.log(`After: ${elem.style.minHeight}`);
</script>

How do I adjust the height of the foo element dynamically? I used both the Height and minHeight attributes, and the results are the same.

In both cases, the elemnt is correctly identified, but the attribute cannot be accessed - Before and After are both empty

Have you referred to this: https://stackoverflow.com/questions/18994830/empty-div-with-style-height-will-not-display? — Rajesh, Dec 10 '20 at 13:59
`elem.style.minHeight = "1500px";` so likely voted down because your code was not syntactically correct to begin with and there were dupes — mplungjan, Dec 10 '20 at 14:13

0stone0 · Accepted Answer · 2020-12-10T14:11:51.663

Since the element hasn't had a height, you'll need to check the offsetHeight. Take a look at Why browser is returning empty string on style.height ? How to get actual height of an element?

Secondly, to set the height of the element, you should include px after 1500: elem.style.height = '1500px';.

An other option is to use: setAttribute('style', 'height:1500px');

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <style>
            #foo {
                border: 1px solid red;
            }
        </style>
        <div id="foo"></div>
        <div id="foobar"></div>
        <script>
            const elem = document.getElementById('foo');
            console.log('Element:' + elem);
            console.log(`Before: ${elem.offsetHeight}`);
            elem.style.height = '1500px';
            console.log(`After: ${elem.style.height}`);
        </script>
    </body>
</html>

Since you've tagged Jquery, it's height function used the pixels by default, so you could shorten the code to:

const elem = $('#foo');
console.log(`Before: ${elem.height()}`);
elem.height(1500);
console.log(`After: ${elem.height()}`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <style>
            #foo {
                border: 1px solid red;
            }
        </style>
        <div id="foo"></div>
        <div id="foobar"></div>
        <script>
            const elem = $('#foo');
            console.log(`Before: ${elem.height()}`);
            elem.height(1500);
            console.log(`After: ${elem.height()}`);
        </script>
    </body>
</html>

Please let OP clarify the question. In his first sentence he is talking about **I am trying to set the width of an element dynamically** where later on he's talking about **I used both the Height and minHeight attributes, and the results are the same.**. — 0stone0, Dec 10 '20 at 14:07

freedomn-m · Answer 2 · 2020-12-10T14:11:53.410

1

1500 is not a valid value for minHeight on its own - you need to specify the units, eg "px" or "%".

Updated snippet:

<style>
  #foo {
    border: 1px solid red;
  }
</style>
<div id="foo"></div>
<div id="foobar"></div>
<script>
  const elem = document.getElementById('foo');
  console.log('Element:' + elem);
  console.log(`Before: ${elem.style.minHeight}`);
  elem.style.minHeight = "1500px";
  console.log(`After: ${elem.style.minHeight}`);
</script>

edited Dec 10 '20 at 14:11

answered Dec 10 '20 at 14:01

freedomn-m

27,664
8
35
57

Fair point, it was a throwaway value I used to see what point scale it was using and set it to something very large so I could see if t had any effect. – Homunculus Reticulli Dec 10 '20 at 14:03
It's not the size that matters.... `1500` is not allowed, it needs to be `1500px` – freedomn-m Dec 10 '20 at 14:04

Setting the height on an element dynamically, in Javascript

2 Answers2