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

时间:2016-08-23 15:28:36

标签: javascript html5

这是我所拥有的一大块代码,它创建了一个按钮,该按钮可添加到可见的变量中。我希望能够知道如何更改显示变量的字体大小。我正在制作类似于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>

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

1 个答案:

答案 0 :(得分:1)

As said earlier, don't use inline javascript (nor inline css). To change the font-size, simply use 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>