1

How to get CSS height and width if they are in percentage value using JavaScript?

Lets say the CSS rule:

.field {
  height:50%;
  width:25%;
}

What we tried:

let a = document.getElementById("field");
console.log(a.style.height)

This give me empty string. Is there any way to get height in percentage using JavaScript?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Naheed
  • 61
  • 7
  • that doesn't work because you are not writing to style attribute of the element, you are using classes, helpful: https://javascript.info/styles-and-classes#computed-styles-getcomputedstyle – Drdilyor Apr 14 '21 at 19:01
  • Does this answer your question? [Get element CSS property (width/height) value as it was set (in percent/em/px/etc)](https://stackoverflow.com/questions/9730612/get-element-css-property-width-height-value-as-it-was-set-in-percent-em-px-et) – Heretic Monkey Apr 14 '21 at 19:21
  • Here Is a solution of the same problem using [jquery](https://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery). But is there any way to implement it in js> – Naheed Apr 14 '21 at 19:22
  • Is there an element with ID `field`? You should show your HTML when asking about HTML. – isherwood Apr 14 '21 at 19:33

3 Answers3

2

The height of an element a as a percentage of its parent can be calculated as

getComputedStyle(a).height.replace('px','') / getComputedStyle(a.parentElement).height.replace('px','') * 100 + '%'

This works however the styles of a and its parent have been set (through classes, through inline style setting). It is not the same as finding out whether the heights were set by a percentages or by other units initially.

Here's a simple example:

let a = document.querySelector(".field");

console.log(getComputedStyle(a).height.replace('px','') / getComputedStyle(a.parentElement).height.replace('px','') * 100 + '%');
.container {
  height: 50vh;
  width: 30vw;
}

.field {
  height:50%;
  width:25%;
}
<div class="container">
  <div class="field"></div>
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
1

Height = a.offsetHeight Width = a.offsetWidth This gives height and width in pixels. Doesn't matter how it's declared in CSS.

kamalnath
  • 56
  • 3
  • how will i get it in percentage?.I know that it could be done using jquery but i want to know a js solution. – Naheed Apr 14 '21 at 19:05
  • I guess there is no direct way to get it in percentage. You can calculate it by getting the parent div dimensions. – kamalnath Apr 14 '21 at 19:13
  • 1
    Height = itemHeight*100/parentHeight Width = itemWidth*100/parentWidth – kamalnath Apr 14 '21 at 19:16
  • The parents div dimension are also in percentage. I have just fixed the height of the body to 100vh. I found one of the answer where it uses [jquery](https://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery) . But I need an implementation in js. – Naheed Apr 14 '21 at 19:19
  • @Naheed this doesnt matter for the solution. `offsetWidth` will get the elements width after it is rendered (if you use the right eventListener) in pixel not in percentage. As such you can calculate the child width in percentage by comparing the parents width in pixel and the child width in pixel. – tacoshy Apr 14 '21 at 19:36
  • Thanks everyone . By using this I have calculated the percentage manually with reference to its parent. – Naheed Apr 14 '21 at 19:59
0

in css rule,field is with dot = class and in js, you are trying getElelmentById.

Change .field to #field in css rule and try ...

#field{
   height:50%;
   width:25%;
 }

You can use getComputedStyle

 let elem = document.getElementById('field');
 let ht = window.getComputedStyle(elem, null).getPropertyValue("height");
 console.log(ht)
Dr Manish Lataa-Manohar Joshi
  • 2,380
  • 5
  • 17
  • 38