user image

Dev-Mo
Published in : 2022-02-12

JavaScript variable for Changing CSS Height

Javascript

I created a script that compares the heights of two items and adjusts the heights to match if one is less than the other. According to the console log, it is doing and recognising everything as intended, with the exception of adjusting the element height, which I assume is due to the fact that it is stored as a variable? Any assistance is much appreciated.

console.log("Script Start");

let divElement = document.getElementById("basic-calendar-card");
let style = window.getComputedStyle(divElement);
let height = style.getPropertyValue("height");

console.log('Basic calendar height = ' + height);

let divElementTwo = document.getElementById("list-calendar-card");
let styleTwo = window.getComputedStyle(divElementTwo);
let heightTwo = styleTwo.getPropertyValue("height");

console.log('List calendar height = ' + heightTwo);

if (height < heightTwo) {
  console.log('List calendar is bigger.')
  divElement.style.height = heightTwo;
} else if (heightTwo < height) {
  console.log('Basic calendar is smaller.')
  divElementTwo.style.height = height;
} else {
  console.log('Same size.')
}

console.log("Script End");

Comments

nico Date : 2022-02-19

Best answers

4

Best answers

4

Hello maybe your browser is not compatible with the code.

 

It would be better to do this to update an attribute which will work on any main browser.

Can you test and make me know if it works better :)

Cheers

 

document.getElementById('xxx').setAttribute("style","height :{height}");

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

jquery undefined function
Publish date: 2022-02-28 | Comments: 1

Tag: Javascript

How select specific tag in jQuery using if else statement?
Publish date: 2022-02-27 | Comments: 1

Tag: Javascript

Vanilla JavaScript Next & prev Navigation
Publish date: 2022-02-22 | Comments: 1

Tag: Javascript

Simple HTML date picker is showing not showing calendar icon!
Publish date: 2022-03-01 | Comments: 2

Tag: Javascript

Help: How do I loop simple JSON objects to iterate all keys and values itself?
Publish date: 2022-03-06 | Comments: 1

Tag: Javascript

Coping plain text into form bug.
Publish date: 2022-02-11 | Comments: 1

Tag: Javascript

Adding an id number at the first index to an array of objects
Publish date: 2022-02-13 | Comments: 1

Tag: Javascript