從span元素獲取fontSize

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

1. document.getElementsByTagName返回元素列表，而不是一個。 因此，您無法訪問該列表的字體大小。
2. 您遇到的第二個問題是fontSize不是元素的參數，而是style參數的屬性。
3. 第三個問題是， 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 { font-size: 13px; } 

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

Answer 2

您可以依次使用window.getComputedStyle來計算跨度的fontSize。

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

 span { font-size: 18px; } 

 <span>Text here</span>