Javascript/Html : 색상뿐만 아니라 글꼴/글꼴 자체의 크기를 어떻게 변경합니까?

Question

이것은 표시되는 변수에 추가하는 단추를 만드는 코드 청크입니다. 표시된 변수의 글꼴 크기를 변경하는 방법을 알고 싶습니다. 쿠키 크리커와 비슷한 게임을 만들고 있습니다.

<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> 

어떻게 변수의 글꼴 크기를 설정하는, 당신이 어떻게 글꼴을 변경하려면 어떻게해야합니까?

Answer 1

said earlier으로 인라인 자바 스크립트 (인라인 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>