How to change the text size by hovering the mouse over another image?-CodePudding

I'm trying to make a website that has a mousetrap that when the mouse hovers on top of a image of a mousetrap, the text changes size.

var mousetrap5 = document.getElementById('mousetrap-5');
var blogText = document.getElementById('blog-text');
mousetrap5.onmouseover = function() {
 blogText.fontSize = '100px';
 blogText.style.fontsize = '100px';
}

I've changed the 4th and 5th line to '100px' so that the changes will be more visible, but nothing happened.

CodePudding user response：

You just needed to capitalize the "S" in fontSize. See below! :)

var mousetrap5 = document.getElementById('mousetrap-5');
var blogText = document.getElementById('blog-text');
mousetrap5.onmouseover = function() {
  blogText.style.fontSize = '100px';
}

<div id="mousetrap-5">
  <span id="blog-text">Hello World</span>
</div>

CodePudding user response：

element.style.fontSize

var mousetrap5 = document.getElementById('mousetrap-5');
var blogText = document.getElementById('blog-text');
mousetrap5.onmouseover = function() {
 blogText.fontSize = '100px';
 blogText.style.fontSize = '100px';
}

<div>
<h1 id="mousetrap-5">Test</h1>
<span id="blog-text">ABCDE</span>
</div>