5

How can I determine if an element has it's CSS width/height set to 'auto' or '100%' using vanilla JS and cross-browser solution?

Using the style property, only returns in-line styles that are set.

document.querySelector("#foo").style.height
Returns: ""

Using getComputedStyle gives a unit value.

getComputedStyle(document.querySelector("#foo")).height
Returns: "334.641px"

The result I am seeking would return what value is set on the element

Return "auto"
or 
Return "80%"

There's an old post from 2011 about walking the stylesheets, but browsers have evolved significantly since then. Surely there must currently be a better way?

For example, Chrome's Computed Property inspector will list style property underneath the computed px value (there's a little drop down arrow if the property was set via CSS). It accomplishes this via computedStyleMap() in the following answer, but not all browsers implement it.

width: 385px;
100%.  .w-full  tailwinds.css:6366
dandan
  • 1,016
  • 8
  • 16
  • 1
    I asked for vanilla JS solution. – dandan May 24 '19 at 04:45
  • I think you are looking for [getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) – vaku May 24 '19 at 05:01
  • 2
    getComputedStyle is already referenced in my question. It returns a unit value of the dimension in the dom in pixels, not the "auto" or "100%". – dandan May 24 '19 at 11:02
  • Since you are **only** interested in knowing `auto` vs `%`, I added an other link which does ask for that too, even though the accepted answer there is incorrect. So please check [this answer](https://stackoverflow.com/a/19873734/3702797) which applies for your case (obviously you don't need jQuery, the same can be done in pure js using `elem.parentNode.style.display ="none"; width=getComputedStyle(elem).width; elem.parentNode.style.display = "";`https://jsfiddle.net/s2mvauoy/) Bt note that it won't work for other relative units like `em`, `vw`, `vh`etc. – Kaiido May 25 '19 at 08:28
  • Thanks @Kaiido. I'll give that a go. – dandan May 25 '19 at 22:24
  • at this point @Kaiido, is it really appropriate to leave this closed as duplicate? None of the answers are *really* appropriate for this here, and a mix of both is need to achieve what OP want. I don't think there would be harm done by reopening this, and answering something that actually solves this case in one single answer. – Félix Adriyel Gagnon-Grenier May 27 '19 at 21:22
  • @FélixGagnon-Grenier yes I think it's still appropriate. In a now deleted comment OP said they actually wanted the vh and vw units too => first link. But their question asks for the % unit vs auto => second link. I could reorder though and will when back on a computer. The fact that the accepted answer is not the correct one does not change the validity of the other question as a dupe. – Kaiido May 27 '19 at 22:52
  • I asked % unit vs auto as an example. It seems in my current use case, yes, I only need both. However, for the benefit of the community it would be very nice to have an all encompassing answer that works for relative units such as `vh` (hence the comment to add). I spent several hours searching questions, etc., and there still isn't a clear and helpful Q/A on stackoverflow, would save a lot of time and bikeshedding. – dandan May 28 '19 at 04:12
  • 1
    Mhaaa... If you want all the units, then it's [this Q/A](https://stackoverflow.com/questions/9730612) => impossible currently but a new API is on its way. If you want only % vs auto then it's [this one](https://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery) => hide-grab-unhide. If this question gets reopened then we would have to write two different answers in the same answer, because this question doesn't ask for anything precise. If this question gets clarified, then it will only clarify of which of the two already linked questions it is a dupe. – Kaiido May 28 '19 at 08:40

1 Answers1

-3

For getting value of element first you set the width of element 100% through css then set element id and get with with js it return 100

farhad shah
  • 3
  • 2