Question

我最近进行了为期5天的训练营，并在开始整个课程之前尝试自学更多。我正在尝试使用与我在训练营中相同的“鼠标悬停”功能来增加fontSize，但是它说它无法将属性fontSize设置为unfined。我相信我已设定要更改的ID，并指定了要更改的数量...

老实说，我对此很陌生，只是想克服我的第一个Javascript障碍。

function thingHover() {
  document.getElementById('Thing').firstChild.style.fontSize = '300%';
}

function thingNormal() {
  document.getElementById('Thing').firstChild.style.fontSize = '100%';
}

<p id='Thing' onmouseover="thingHover()" onmouseout="thingNormal"> Dunno what I'm gonna do to this text yet, maybe add some JS? </p>

在新手训练营中，我们将其应用于图标而非文本。该图标似乎悬停在其原始位置上方，稍大一些。我不想只是复制粘贴图标代码，只是因为我的文本代码不起作用。

Answer 1

下面的代码中有错别字错误，调用时请添加功能括号

function thingHover() {
           document.getElementById('Thing').style.fontSize='300%'; //remove firstChild
         }
         function thingNormal() {
           document.getElementById('Thing').style.fontSize='100%'; //remove firstChild
         }
           </script>

<p id='Thing' onmouseover="thingHover()" onmouseout="thingNormal()"> Dunno what I'm gonna do to this text yet, maybe add some JS? </p> <!--add  space between two attributes and add () on onmouseout-->

Answer 2

您没有任何子元素，因此也没有第一个孩子：

我做了一些小的修改，这是一个有效的代码段。

  function thingHover() {
   var thing = document.getElementById('Thing');
   thing.firstElementChild.style.fontSize = '300%';
  }
  function thingNormal() {
  var thing = document.getElementById('Thing');
    thing.firstElementChild.style.fontSize = '100%';
  }

<script>

</script>
<div id='Thing'onmouseover="thingHover()" onmouseout="thingNormal()">
<p style='fontSize:100%;'>Dunno what I'm gonna do to this text yet, maybe add some JS?</p>
</div>

为什么说我无法设置属性fontSize，因为某些未定义？

2 个答案: