javascript - 如何在 Javascript 中修改计算的字体大小

Question

我正在尝试更改文本的字体大小，以使其适合动态 div 的尺寸。

我找到了一些符合要求的 jquery 代码，但是我不能在我的代码中使用 jquery，需要将它转换成 vanilla javascript。

当我运行转换后的代码时，我收到此错误: “未捕获的 DOMException:无法在“CSSStyleDeclaration”上设置“字体大小”属性:已计算这些样式，因此“字体大小”属性是只读的。”

这是我需要转换的原始 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 = ...