Question

只是尝试学习javascript，现在正试图让我的内容（此时只是一个红盒子）进行扩展。不要看我做错了什么。非常感谢帮助。

我的HTML：

<div class="content" onmouseover="expand()"></div>

我的css：

 .content
    {
      width:100px;
      height:100px;
      background-color:red;
      margin:auto;
      position:absolute;
      top:0;
      right:0;
      left:0;
      bottom:0;
    }

我的javascript：

function expand()
{
  var content = document.getElementsByClassName("content");
  content.style.width = "200px";
}

Answer 1

问题在于：

var content = document.getElementsByClassName("content");

因为getElementsByClassName返回HTMLCollection。（有关其工作原理的更多信息，请查看链接中的信息。）

快速修复将从结果中检索第一个元素：

var content = document.getElementsByClassName("content")[0];

但这仅适用于具有此类的第一个DOM元素，对于其他元素，它们将被忽略。

另一个解决方案可能是使用this将当前元素传递给函数，然后相应地更新元素的样式。

<div class="content" onmouseover="expand(this)"></div>

function expand(elem) {
    elem.style.width = "200px";
}

第三个（和IMO更好）选项是使用CSS :hover来完成的。

Answer 2

而不是使用javascript进行扩展，您可以使用CSS本身：

.content:hover {
    transform: scale(1.5);
}

将1.5更改为您想要缩放的数量。

如何在悬停时编辑对象的样式？

2 个答案: