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

时间:2019-02-27 21:21:08

标签: javascript jquery css dom

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

我找到了一些符合要求的jquery代码,但是我无法在代码中使用jquery,需要将其转换为原始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
  }

我在做什么错了?

1 个答案:

答案 0 :(得分:3)

您需要将新大小设置为元素的style.fontSize属性,而不是从window.getComputedStyle()中获取的计算值,例如

el.style.fontSize = elNewFontSize;

-

顺便说一句,并且没有直接关系,没有理由让变量名两次出现,您可以使用声明将其初始化,而不是:

var elNewFontSize
elNewFontSize = ...

简单地写

var elNewFontSize = ...