时间戳

首页 > 解决方案 > 如何在javascript中将“5px”添加到当前字体大小

javascript - 如何在javascript中将“5px”添加到当前字体大小

问题描述

我试图在单击时更改类的字体大小，我唯一的问题是我不想将 fontSize 更改为固定数字，而是想将“5px”添加到已经当前的 fontSize。

JavaScript：

function bigger() {
  var e, i;
  e = document.querySelectorAll(".example");
  for (i = 0; i < e.length; i++) {
    e[i].style.fontSize = "20px";
  }
}

标签： javascripthtmlcss

解决方案

更好的方法是使用 css 变量
示例代码：

(function()
  {
  const
      fSzProp = '--fsize'
    , Root    = document.documentElement
    , gRoot   = getComputedStyle(Root)
    , btnInc  = document.querySelectorAll('button[data-inc-font]')
    ;
  var fSizeVal = parseInt(gRoot.getPropertyValue(fSzProp))
    ;
  btnInc.forEach(bt=> bt.onclick=()=>
    {
    fSizeVal = Math.max( 6 , (fSizeVal + Number(bt.dataset.incFont)))
    Root.style.setProperty(fSzProp,  `${fSizeVal}px`)
    })
  }
)()
:root {
  --fsize : 16px;
  }
.elements {
  font-size : var(--fsize );
}
<p>Set Font to : 
  <button data-inc-font="+5"> + 5px </button>
  <button data-inc-font="-5"> - 5px </button>
</p>

<p class="elements"> hello world 1</p>

<p class="elements"> hello world 2</p>

推荐阅读