鼠标悬停在图片上时如何修改文本字号？代码无效果问题求助

嘿，我一眼就瞅到你代码里的问题啦，咱们来快速搞定这个交互失效的情况：

问题根源在哪？ #

你的代码里有两个关键错误：

• 第4行的 blogText.fontSize = '100px'; 完全无效：DOM元素本身没有直接的fontSize属性，要修改CSS样式必须通过元素的style对象来操作，所以这行可以直接删掉。
• 第5行的 blogText.style.fontsize = '100px'; 拼写错误：JavaScript里操作CSS样式时，连字符命名的CSS属性（比如font-size）要转成驼峰式命名，也就是fontSize（注意字母S是大写的），小写的s会让浏览器识别不到这个属性。

修正后的代码 #

把代码改成这样就能正常触发字号变化效果了：

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

额外优化（可选） #

如果你希望鼠标移开图片后，文本字号能恢复原样，可以再加个onmouseout事件：

mousetrap5.onmouseout = function() {
    blogText.style.fontSize = '16px'; // 这里换成你原本的字号大小就行
    // 或者用'initial'让它恢复到默认样式：blogText.style.fontSize = 'initial';
}

内容的提问来源于stack exchange，提问作者John Doe