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

Question

我目前有以下 HTML block ，用于突出显示 .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);
}

可以看到两者在以下 page 上一起工作.

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

谁能告诉我怎么做？

提前感谢所有回复的人。

Answer 1

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

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

称为:

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