Question

我有一个动态创建的div。我还使用display:none和display:block来切换div的可见性。我想使用普通的 Javascript 和 CSS 为该div创建一个关闭图标。那可能吗？

我尝试使用简单的X图标来更改可见性。

这是我的 CSS ：

.dhSeriesToolbar {
     max-height: 200px;
     width:400px;
     background-color: black;
     z-index:999;
     display:none;
     overflow:auto;
     border: 2px solid #33ccff;
     padding-left: 15px;
     padding-top: 15px;
     padding-bottom: 15px;
     position:absolute;
 }

Answer 1

最好看到您的代码可以帮助您做得更好。但想法如下：在<img>元素中添加一个图标（<div>），并将Javascript调用绑定到 onclick 事件，该事件将隐藏（或删除，关于您的需求）<div>。

Answer 2

是的可能......这样做

// javascript part
myfunction(){
document.getElementById("divShowHide").setAttribute("style", "display:none;");
}

// html part
<img src="icon.png" onclick="myFunction()"/>

Answer 3

你也可以玩visibility:hidden

Answer 4

您可以动态创建关闭图标以及div e-g

$("body").append("<div class='dynamically_created_div'><a href='javascript:void(0);' onclick='closeDiv()'></a></div>");

function closeDiv() {
  $(".dynamically_created_div").hide();
}

在动态div上关闭图标

4 个答案: