javascript - 无法更改 CSS JavaScript

标签 javascript html css

我只想将我的一个 div 的显示属性设置为基于事件进行阻止,默认情况下为“无” 它不会发生错误:无法设置未定义的属性“显示” 下面是我的代码。请提出建议。

HTML

<!DOCTYPE html>
<html >
<head>
<meta charset="ISO-8859-1">
<title>Sample Mod Pop UP</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="body">


<div class="popUp" id="id1">
  <p>Are You Sure You Want to Quit?</p>
  <span>&#10006</span> 
</div>
<button onClick=closeWindown() class="btn">Close</button>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JavaScript

function closeWindown(){

    document.getElementsByClassName("popUp").style.display="block";


}

最佳答案

getElementsByClassName 得到一个nodeList,所以要迭代

function closeWindown(){

    var elements = document.getElementsByClassName("popUp");

    for (var i=elements.length; i--;) {
        elements[i].style.display = "block";
    }

}

作为旁注,querySelectorAll('.popup') 有更好的支持,但不是实时的。

关于javascript - 无法更改 CSS JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24464984/

相关文章:

html - Bootstrap 轮播中的中心图像

asp.net - 制作一个 CSS HTML 按钮

javascript - 如何使用带有 JSON 数据的菜单和子菜单创建 Bootstrap4 导航栏?

html - CSS:将标题定位在内容的左侧

html - 文本缩进 - 在 Safari 中不显示文本

css - 如何在简单的 HTML 文档中水平和垂直居中 HTML5 视频?

javascript - 有条件地绑定(bind) Aurelia 中的事件

javascript - 使用 Angular.js 或 JavaScript 将一个字符串替换为另一个字符串

javascript - 通过js中的递归调用更改树结构数据中的父属性

javascript - 如何可靠地确定浏览器是否支持鼠标悬停事件?