Question

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

那是代码。因此，我想获取一个名为menu的类的字体大小。然后，我要提醒（“ HELLO”）。但是，警报将无法运行，并且当我将警报更改为alert（fontSize）时，警报也将无法正常工作。我的代码有什么问题吗？

Answer 1

您应该将元素传递给.getComputedStyle方法。 .getElementsByClassName返回一个集合。您需要从集合中选择第一个元素，或使用.querySelector选择目标元素。还要注意，.getComputedStyle返回的对象没有fontSize方法，它是一个属性。您还可以使用.getPropertyValue获取特定值：

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

Answer 2

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

styles将给出具有所有可用样式的对象。只需打印并检查是否可以得到。

Answer 3

您的代码有些错误。

首先，getComputedStyle 期望其第一个参数是单个DOM元素。 getElementsByClassName 返回一个 HTMLCollection，包含live collection个DOM元素的类数组对象。那这就是为什么，如果您在错误控制台中查看，则应该看到一条错误消息 “ TypeError：Window.getComputedStyle的参数1的行不实现接口元素。”。

第二，getComputedStyle返回一个 CSSStyleDeclaration 对象，它没有.fontSize方法。但是它确实有一个 getPropertyValue 您可以用来获取字体大小的方法。

// 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>

我想在javascript中使用window.getComputedStyle（）获得字体大小，但它不能

3 个答案: