4

I would like to get, in my JS code, the "original" CSS width property applied to an element, not the runtime (computed) width.
eg. 

.foo {
  width: 50% /* or 123px, or 5em, ...*/
}

in this case, I want to get "50%", and not the px value computed at runtime. If value is given in em, I want to get em as result. window.getComputedStyle(foo, null).getPropertyValue('width'), returns a pixel value (at least on google chrome).
In fact I need the text value of the CSS rule applied to the element.

Franck Freiburger
  • 26,310
  • 20
  • 70
  • 95
  • Where do you want to get it? In your browser developer tools, in JavaScript, ...? – Kilian Stinson Sep 22 '16 at 09:52
  • possible duplicate http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript – Kilian Stinson Sep 22 '16 at 09:57
  • @KilianStinson, a agree, it's nearly a duplicate, but in http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript he wants to get the rule value of a class, in my case I want to get the CSS value applied to my element regardless the classes. Basically I want to get the value after the CSS engine run – Franck Freiburger Sep 22 '16 at 10:00
  • Possible duplicate of [Retrieving percentage CSS values (in firefox)](http://stackoverflow.com/questions/8387419/retrieving-percentage-css-values-in-firefox) – Pete Sep 22 '16 at 10:06
  • @Pete, percentage value is for the example only, if value is em, a want to get em – Franck Freiburger Sep 22 '16 at 11:02
  • Why do you want to do this? –  Sep 22 '16 at 13:17
  • @torazaburo, I need to wrap a random element at runtime without impacting the surrounding layout. – Franck Freiburger Sep 24 '16 at 08:16
  • I can't say for sure without more details, but if you mean wrap in another element, such as a `div`, the wrapping div should by default assume the dimensions of its content. –  Sep 24 '16 at 09:24
  • You just need to step through the `document.styleSheets` collection. Each sheet represents a ` – enhzflep Sep 24 '16 at 11:29

1 Answers1

0

foo.width in pixels / parentElement.width * 100 = foo.width in % so in JS for example:

var width = document.getElementById('foo').offsetWidth;
var parentWidth = document.getElementById('parentOfFoo').offsetWidth;

var fooWidthPercentage = width / parentWidth * 100;
console.log(fooWidthPercentage);
Grey
  • 877
  • 9
  • 29
  • 1
    The implication of the question is that if the `width` value is `10em` then the OP would want `10em` to be returned, similarly if the value is `24vmin`...it doesn't appear to be a problem of converting the width to a percent value, but instead retrieving the assigned value and units (presumably without knowing in advance what those units might be). – David Thomas Sep 22 '16 at 09:59
  • I wouldn't see how that would cause a problem, wouldn't javascript measure the width in pixels (or convert the 10em/24vmin to pixels) anyway? that's how I understand JS anyway. – Grey Sep 22 '16 at 10:02
  • JavaScript can definitely convert from `px` to `rem` (or whatever), but to know that a conversion should be performed requires first finding out what units to convert to, which itself involves retrieving the original property-value from the stylesheet(s), at which point the conversion would be unnecessary. – David Thomas Sep 22 '16 at 10:12