Capturing the element style - font-size

Question

I am using WordPress with WPBakery Web Builder.

I am trying to capture a CSS attribute("font-size") of a specific element in the screen. In order to capture the element and its attribute I am using JavaScript.

I am running the following script:

var v = document.getElementsByClassName("cb-img-area");
v[0].style.fontSize;

and the output is "", even though this is the class's CSS -

.cb-img-area {
    font-size: 72px;
    margin-bottom: 25px;
    margin-right: 0;
    float: left;
    width: 100%;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

How can I get the class's font-size attribute?

Thank you

Would [that](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) help? — Yevhen Horbunkov, Jul 27 '20 at 22:38

score 0 · Answer 1 · answered Jul 27 '20 at 23:49

Original here

Just grabbing the style.fontSize of an element may not work. If the font-size is defined by a stylesheet, this will report "" (empty string).

You should use window.getComputedStyle.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';

May you can choose, my answer for your question as a solution clicking on the ✔ at the side. — Mauro Rocha, Aug 05 '20 at 17:50

Capturing the element style - font-size

1 Answers1