Javascript 从span元素获取fontSize

我正在尝试访问我的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

，我猜这是画布的默认字体。我做错了什么

document.getElementsByTagName

返回一个元素列表，而不是一个。因此，您无法访问该列表的字体大小

第二个问题是

fontSize

不是元素的参数，而是

style

参数的属性

第三个问题是，

fontSize

可能在

css

中设置，而不是在刚才访问的特定

span

元素的

style

属性中设置

您可以执行以下操作：

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

检查以下示例：

let spanEl=document.getElementsByTagName（“span”）；
console.log（window.getComputedStyle（spanEl[0]）.fontSize）
span{
字体大小：13px；
}
测试

测试

测试
您可以使用
window.getComputedStyle
来计算跨度的大小


let spanEl=document.getElementsByTagName（“span”）；
console.log（window.getComputedStyle（spanEl[0]）.fontSize）
span{
字号：18px；
}
此处的文本