I want to get the font-size using window.getComputedStyle() in javascript but it can't

Question

var menu = document.getElementsByClassName("menu");
var a = window.getComputedStyle(menu, null).fontSize();
var fontSize = parseFloat(a);

alert("HELLO");

That is the code. So I want to get the font-size of a class named menu. Then, I want to alert("HELLO"). But, the alert won't run and when I change the alert into alert(fontSize), it is not working either. Is anything wrong with my code?

Have a look at:https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_getcomputedstyle — Prashant Pimpale, Oct 07 '18 at 14:26

Ram · Accepted Answer · 2018-10-07T14:30:12.660

You should pass an element to .getComputedStyle method. .getElementsByClassName returns a collection. You either need to select the first element from the set or use .querySelector for selecting the target element. Also note that returned object by .getComputedStyle doesn't have fontSize method, it's a property. You can also use the .getPropertyValue for getting a specific value:

// select the first .menu element
var menu = document.querySelector(".menu");
var a = window.getComputedStyle(menu, null).getPropertyValue('font-size');

score 1 · Answer 2 · answered Oct 07 '18 at 14:34

1

var menu = document.querySelector(".menu");
var styles = menu.computedStyleMap();

styles will give the object which has all the styles available in it. Just print it and check if you got it.

answered Oct 07 '18 at 14:34

Sunil Singh

11,001
2
27
48

score 1 · Answer 3 · answered Oct 07 '18 at 15:06

There are a couple of things wrong with your code.

First, getComputedStyle expects its first argument to be a single DOM element. getElementsByClassName returns a HTMLCollection, an array-like object containing a live collection of DOM elements. That is why, if you look in your error console, you should see an error message along the lines of "TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.".

Second, getComputedStyle returns a CSSStyleDeclaration object, which does not have a .fontSize method. It does however have a getPropertyValue method that you can use to get the font size.

// use querySelector, which returns a single DOM element that is the first in
// the DOM to match the provided query string
let menu = document.querySelector(".menu");

// You can just omit the second parameter if you are not targeting a pseudo
// element.
let styles = window.getComputedStyle(menu);
// get the font size in px
let fontSize = styles.getPropertyValue('font-size');
fontSize = parseFloat(fontSize);

alert('font-size =' + fontSize);

.menu {
  font-size: 1.5em;
}

<div class="menu">Menu</div>

I want to get the font-size using window.getComputedStyle() in javascript but it can't

3 Answers3