object.style.maxHeight doesnt work if maxHeight is define at css

Question

I just want to get the maxHeight of an element previously define at css but doesnt work. It only works if I modify it explicitly with javascript first

Code

let something=document.querySelector(".something");
let before=document.querySelector(".before");
let after=document.querySelector(".after");
before.textContent=something.style.maxHeight
something.style.maxHeight="20px";
after.textContent=something.style.maxHeight;

.before::before{
  content:'Before:'
}
.after::before{
  content:'After: '
}
.something{max-height:30px}

<body>
  <div class="something">
       Something very cool  
  </div>
  <div class="before">
   Before:
  </div>
  <div class="after">
   After:
  </div>
</body>

Any recomendation about how can I do it without to define max-height with javascript in all my elements? .Ignore the fact that I write "before;" and "after:" inside divs(I can´t edit). Thank you — John Balvin Arias, Feb 25 '18 at 22:57
I don't have time to find a dupe, but like most css property, you can access the computed value through [`window.getComputedStyle(element)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) — Kaiido, Feb 25 '18 at 23:35
Thanks for the answer, I thought it was gonna be computable expensive but I was wrong, it takes almost the same time to compute if something.style.maxHeight would work [link](http://jsbin.com/muwuva/edit?html,css,js,output) — John Balvin Arias, Feb 26 '18 at 01:27
Your tests doesn't prove anything. If getComputedStyle is expensive it is because the browser has to perform a reflow of the page, but once it's been done, it won't redo it, except if you changed the styles in-between calls of course. So if you are doing a lot of DOM manip and call it at every changes, it will have a bad impact on performances. You should use it with care, just like anything else btw. — Kaiido, Feb 26 '18 at 01:43
I said it wasnt computable expensive, but anyway thaks for aclaration — John Balvin Arias, Feb 26 '18 at 02:16

Elron · Accepted Answer · 2018-02-26T00:51:50.757

1

I did a little digging and found an answer for you, just replace your line with this:

before.textContent=window.getComputedStyle(something).maxHeight

Code

let something=document.querySelector(".something");
let before=document.querySelector(".before");
let after=document.querySelector(".after");
before.textContent=window.getComputedStyle(something).maxHeight; // the fix!!!
something.style.maxHeight="20px";
after.textContent=something.style.maxHeight;

.before::before{
  content:'Before:'
}
.after::before{
  content:'After: '
}
.something{max-height:30px}

<body>
  <div class="something">
       Something very cool  
  </div>
  <div class="before">
   Before:
  </div>
  <div class="after">
   After:
  </div>
</body>

alternatively: you can get the element current rendered height by doing so: How do you get the rendered height of an element?

edited Feb 26 '18 at 00:51

answered Feb 25 '18 at 23:16

Elron

1,235
1
13
26

.something{max-height:30px} <- that is the max-height declared at css – John Balvin Arias Feb 25 '18 at 23:26
You're right, I did a little digging and found a solution - window.getComputedStyle. I updated my answer. – Elron Feb 26 '18 at 00:47
Thanks for the answer, I thought it was gonna be computable expensive but I was wrong, it takes almost the same time to compute if something.style.maxHeight would work [link here](http://jsbin.com/muwuva/edit?html,css,js,output) – John Balvin Arias Feb 26 '18 at 01:28
Yeah you might have dug [really far](https://stackoverflow.com/questions/48979306/#comment-84964308)... – Kaiido Feb 26 '18 at 01:44
@Kaiido I must have passed over your answer, sorry. It is valid as well. – Elron Mar 06 '18 at 22:02

object.style.maxHeight doesnt work if maxHeight is define at css

1 Answers1