Setting the height on an element dynamically, in Javascript [duplicate]

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: stackoverflow.com/questions/18994830/…? — Rajesh Dixit
– Rajesh Dixit, Commented Dec 10, 2020 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
– mplungjan, Commented Dec 10, 2020 at 14:13

0stone0 · Accepted Answer · 2020-12-10 14:11:51Z

2

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>

edited Dec 10, 2020 at 14:11

answered Dec 10, 2020 at 13:59

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

0stone0 Over a year ago

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..

fdomn-m Over a year ago

And indeed, the title is "setting the height"

Homunculus Reticulli Over a year ago

It was a typo. Fixed now

fdomn-m · Accepted Answer · 2020-12-10 14:11:53Z

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, 2020 at 14:11

answered Dec 10, 2020 at 14:01

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

2 Comments

Homunculus Reticulli Over a year ago

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.

fdomn-m Over a year ago

It's not the size that matters.... 1500 is not allowed, it needs to be 1500px

Collectives™ on Stack Overflow

Setting the height on an element dynamically, in Javascript [duplicate]

2 Answers 2

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Linked

Related