如何在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 = ...