如何在Javascript中修改計算的字體大小

Question

我試圖改變文本的字體大小，使其適合動態div的維度。

我找到了一些適合該法案的jquery代碼，但是我不能在我的代碼中使用jquery並且需要將其轉換為vanilla javascript。

當我運行轉換后的代碼時，我收到此錯誤：'未捕獲DOMException：無法在'CSSStyleDeclaration'上設置'font-size'屬性：計算這些樣式，因此'font-size'屬性是只讀的。

這是我需要轉換的原始jQuery代碼：

elements = $('.resize')
el = elements[_i]

和：

resizeText = function () {
    var elNewFontSize
    elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px'
    return $(el).css('font-size', elNewFontSize)
  }

這是我的轉換：

elements = document.getElementsByClassName('resize')
el = elements[_i]

和：

resizeText = function () {
    var elNewFontSize
    elNewFontSize = (parseInt(window.getComputedStyle(el).fontSize.slice(0, -2)) - 1) + 'px'
    window.getComputedStyle(el).fontSize = elNewFontSize
    return elNewFontSize
  }

我究竟做錯了什么？

Answer 1

您需要將新大小設置為元素的style.fontSize屬性，而不是從window.getComputedStyle（）獲得的計算值，例如

el.style.fontSize = elNewFontSize;

-

順便說一句，並沒有直接相關，沒有理由讓變量名稱兩次，你可以用聲明初始化它，即代替：

var elNewFontSize
elNewFontSize = ...

簡單寫一下

var elNewFontSize = ...