Question

我正在尝试访问我的span元素字体大小。

我在div中有一堆span元素。我使用样式表根据屏幕大小更改字体大小。我想将它添加到画布，但它需要具有相同的字体/字体大小。让我们在我的CSS中说span{font-size:12px}

let spanEl = document.getElementsByTagName("span")
let canvas = document.querySelector("#canvas")
let ctx = canvas.getContext("2d")

ctx.font = spanEl.fontSize+" "+"Open Sans";

当我console.log(ctx.font)时，它会返回10px san-serif，我猜这是画布的默认字体。我做错了什么？

Answer 1

document.getElementsByTagName返回元素列表，而不是一个元素。因此，您无法访问该列表的字体大小。
您遇到的第二个问题是fontSize不是元素的参数，而是style参数的属性。
第三个问题是fontSize可能在css中设置，而不是在您刚刚访问的特定style元素的span属性中设置。

您可以做的是：

let spanEl = document.getElementsByTagName("span");
ctx.font = window.getComputedStyle(spanEl[0]).fontSize + " Open Sans";

检查以下示例：

＆＃13;

let spanEl = document.getElementsByTagName("span");
console.log(window.getComputedStyle(spanEl[0]).fontSize);

＆＃13;

span {
  font-size: 13px;
}

＆＃13;

<span>test</span><br />
<span>test</span><br />
<span>test</span><br />

＆＃13;

Answer 2

您可以按顺序使用window.getComputedStyle来计算范围的fontSize。

＆＃13;

let spanEl = document.getElementsByTagName("span");

console.log(window.getComputedStyle(spanEl[0]).fontSize)

＆＃13;

span {
  font-size: 18px;
}

＆＃13;

<span>Text here</span>

＆＃13;

从span元素获取fontSize

2 个答案: