javascript - 使用 JavaScript 打开/关闭元素的 CSS

Question

我目前有以下 HTML 块，用于突出显示 .png 文件的特定区域：

<div id="container">
    <img src="http://www.placekitten.com/200/200" />
    <div id="highlight"></div>
</div>

其对应的 CSS 代码如下所示：

#container {
    positioon:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

在下一页上可以看到两者一起工作。

代码工作正常，但我想做的是通过让 JavaScript 函数控制此功能来找出打开/关闭突出显示的方法。我是 JavaScript 新手，不知道如何处理这个问题。我想要的只是能够将变量传递给 JavaScript 函数，并根据这个布尔变量激活或停用阴影。

谁能告诉我如何做到这一点？

提前感谢所有回复的人。

Answer 1

您可以创建 CSS 类规则：

.hide {
    display: none;
    visibility: hidden;
}

并使用 javascript 添加或删除该类到您想要切换的元素。这样，当一个元素拥有它时，它就不会显示class="none"出来，只需将其删除class="none"，它就会再次显示出来。

这里有一个关于使用纯 javascript 添加和删除类的好问题：Change an element's class with JavaScript

Answer 2

如果我理解您所说的话，您希望当有人用指针通过 div 时，显示或隐藏它。
如果我没记错的话，你只需要使用#highlight:hover {...}，不需要 javascript。
此外，您必须添加display: block属性，默认情况下它必须是display: none.

Answer 3

function toggleHighlight(on)
{
  var el = document.getElementById('highlight');

  el.style['display'] = on ? 'block' : 'none';
}

称为：

toggleHighlight(true);  // turn on
toggleHighlight(false); // turn off

Answer 4

在您的小提琴中，我可以看到您使用 jquery，因此可以使用以下代码来实现：

// show the element
$('#highlight').hide();
// hide the element
$('#highlight').show();

我已经更新了您的示例以测试隐藏功能。