0

I want to get the final css property applied to a dom node, but not the calculated value. I know that getComputedStyle can get a computed value, but this isn't what I want. Here's an example:

<body>
  <div id='x' class="a b">x</div>
</body>
<style>
 .a {
   height: auto;
 }
 .b {
   height: 35%;
 }
</style>

I want to be able to find that '35%' value for my x div, not the pixel height. How can I do this in javascript? Is there an easy way or do you have to traverse the classes and stylesheets yourself?

B T
  • 57,525
  • 34
  • 189
  • 207
  • You'll always get the final number, in pixels. If you want something else, calculate it yourself, percentage is just based on the parent height etc. – adeneo Oct 03 '16 at 01:43
  • Have you tried anything so far? – Pixelknight1398 Oct 03 '16 at 01:43
  • @Pixelknight1398 I've tried researching how to do it. The only way I can think of involves traversing all the stylesheets and classes, which I really don't want to have to do – B T Oct 03 '16 at 01:48
  • 1
    what are you trying to do? why/what do you need that value for *(rather than the computed one)*? – Thomas Oct 03 '16 at 01:51
  • @Thomas I'm trying to calculate the maximum height a dom node can take up without going outside the boundaries of its parent. See this question: http://stackoverflow.com/questions/27514761/calculating-the-maximum-minimum-height-of-a-div-element/39782139#39782139 – B T Oct 03 '16 at 01:55
  • @Terry The 3rd answer there looks promising, I'm trying that out. – B T Oct 03 '16 at 01:55
  • Alright, the answer where you hide the parent then use getComputedStyle worked for me (then you unhide the parent). – B T Oct 03 '16 at 04:07

0 Answers0