使用JavaScript打开/关闭元素'

Turn an element's CSS on/off using JavaScript

本文关键字：元素 JavaScript 打开 使用      更新时间：2023-09-26

我目前有以下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函数，并基于这个布尔变量，激活或停用阴影。

谁能告诉我怎么做这个?

提前感谢所有回复的人。

function toggleHighlight(on)
{
  var el = document.getElementById('highlight');
  el.style['display'] = on ? 'block' : 'none';
}

称为:

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

你可以创建一个CSS类规则:

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

和javascript添加或删除类的元素，你想要切换。这样，当一个元素有class="none"时，它就不会显示，只要删除class="none"，它就会再次显示。

这里有一个关于使用纯javascript添加和删除类的好问题:使用javascript更改元素的类

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

在你的小提琴我可以看到你使用jquery，所以这可以实现使用以下代码:

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

我已经更新了你的例子来测试隐藏函数

相关文章：