從span元素獲取fontSize

我試圖訪問我的span元素字體大小。從span元素獲取fontSize

我在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我的猜測是在畫布的默認字體。我究竟做錯了什麼？

來源

2017-09-12 denpa

document.getElementsByTagName返回元素列表，而不是一個。因此，您無法訪問該列表的字體大小。
您遇到的第二個問題是fontSize不是元素的參數，而是style參數的屬性。
第三個問題是可能在css中設置了fontSize，而不是您剛纔訪問的該特定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 />

來源

2017-09-12 21:21:07 Dekel

您可以按順序計算fontSize的使用window.getComputedStyle的跨度。

let spanEl = document.getElementsByTagName("span"); 
 

 
console.log(window.getComputedStyle(spanEl[0]).fontSize)

span { 
 
    font-size: 18px; 
 
}

<span>Text here</span>

來源

2017-09-12 21:21:42 felixmosh

從span元素獲取fontSize

回答

相關問題