Javascript/Html:我如何改变字体/字体本身的大小,而不仅仅是颜色

Javascript/Html: How do I change the size of the font/font itself, not just the color?

本文关键字:字体 颜色 不仅仅是 Html 何改变 改变 Javascript      更新时间:2023-09-26

这是我的代码块,创建了一个按钮,它添加到一个可见的变量。我想能够知道如何改变显示变量的字体大小。我正在制作一个类似于cookie clicker的游戏。

<div class="game-object">
<script type="text/javascript">
var clicks = 0;
document.getElementById("push").addEventListener("click", updateClickCount);
function updateClickCount() {
var el = document.getElementById("clickCount");
el.innerHTML = clicks;
el.style.color = '#'+Math.floor(Math.random()*16777215).toString(16);
}
</script>
<button type="button" onClick="clicks++;updateClickCount();" id="push" style="width:400px;height:60px;"><font size="5" face="verdana" color="white">Click me for Cola!</font></button>
<div id="clickCount"></div>

如何设置变量的字体大小,以及如何更改字体?

如前所述,不要使用内联javascript(也不要使用内联css)。要更改字体大小,只需使用el.style.fontSize

var clicks = 0;
document.getElementById("push").addEventListener("click", updateClickCount);
function updateClickCount() {
var el = document.getElementById("clickCount");
clicks++;
el.innerHTML = clicks;
el.style.color = '#'+Math.floor(Math.random()*16777215).toString(16);
el.style.fontSize = '200px';
}
#push {
  width:400px;
  height:60px;
  font-size: 2em;
  color: white;
}
<div class="game-object"></div>
<button type="button" id="push">Click me for Cola!</button>
<div id="clickCount"></div>