Javascript CSS样式为空

我有一个页面，当用户单击页面上的图像或链接时，应该会弹出一个模式（覆盖）。第一次加载页面时，模式为空，并使用以下html隐藏：

<!--// MODAL: ITEM PROFILE //-->
<div id="profile" class="modal" style="visibility: hidden">
</div>
<!--// OVERLAY //-->
<div id="overlay" style="visibility: hidden"></div>

---

但是，当我单击触发模式时，我会收到错误消息

uncaughttypeerror:cannotreadproperty'visibility'of undefined

。我在警报中试图捕捉到这一点，发现虽然profile元素存在，但它的样式显然不存在，即使它定义了内联css，以及另一个文件中的大约250行。为什么style属性显示为null？

jQuery对象没有样式属性，因为它们是DOM对象的数组（确实有样式属性）

您想要：

SET: $('#overlay').css('visibility', 'hidden')
GET: $('#overlay').css('visibility')

或

---

您在返回的jQuery对象上使用Javascript原始元素属性，但它不起作用，您应该使用

css（）

方法：

if($("#profile").css('visibility') == "hidden")

---

您将jQuery与本机JavaScript混合使用

原生HTML元素上有

样式

对象，而jQuery包装的元素则没有。如果要使用jQuery，请使用

if ($(" #profile").css('visibility') == "hidden")

此外，下面的行也不会按您的意愿工作

if (modal == null){

…因为分配给

modal

的值也是jQuery包装的元素。一个jQuery对象，即使它无法匹配元素，在求值时总是有一个“truthy”值——换句话说，它永远不会求值为null、false或任何其他虚假值。而是使用：

if (modal.length){

…或者换句话说，“如果jQuery选择器发现任何元素…”

---

最后，作为更次要的一点，您没有处理真正意义上的模态窗口。这是DHTML；模态窗口是一种低级浏览器功能，用户在返回父应用程序（例如警报）之前必须与其交互。

使用css方法，而不是样式。如果（$（“#profile”）.css（“可见性”）=“隐藏”）…类似的东西，我想如果只有一个项目，它就会返回该项目，我从来没有想到它总是返回一个数组。谢谢

if (modal == null){

if (modal.length){