How to retrieve rendered padding value

Question

I have a element with padding-right: 0.25em; and font-size: 2.75em;, this element is inside its parent node. the parent node has this style : font-size: 20px.

So the actual padding of the element is controlled by font size of the parent node right?

I may change my parent node font size to have different padding right value, How can I dynamically retrieve the real rendered value of the new padding-right?

I tried :

$('.word').innerWidth() - $('.word').width()

But this bring only the fixed value!!! in my case 12..

Answer 1

Use getComputedStyle as following:

let para = document.querySelector('.word');
let compStyles = window.getComputedStyle(para);

let mypadding = compStyles.getPropertyValue('padding-right');