javascript - CSS 样式为空

Question

我有一个页面，当用户单击页面上的图像或链接时，该页面应该弹出模式(覆盖)。当页面首次加载时，模态框是空白的，并使用以下 html 隐藏:

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

当用户点击图片或链接时，应该使用此函数触发模式:

function itemModal(id){
var modal = $("#profile");
if (modal == null){
    alert("Modal not found!");
}

if($(" #profile").style.visibility == "hidden"){
    $.ajax
      (
        { //Ajax call to get item data
          type: "POST",
          url: "/organizer/getItem",
          data: { item_id: id },
          dataType: "html",
          success: function( responseText, textStatus, XHR )
          {
            // select the element with the ID profile and insert the HTML
            $("#profile" ).html( responseText );
            $("#profile").style.visibility = "visible";
            $("#overlay").style.visibility = "visible"
          }
        }
      );
  }
  else{ //Modal is being displayed, hide it and remove contents
    $("#profile").html('');
    $("#profile").style.visibility = "hidden"; 
    $("#overlay").style.visibility = "hidden";
  }
}

但是，当我单击以触发模式时，我收到错误消息 Uncaught TypeError: Cannot read property 'visibility' of undefined。我发出警报试图捕捉到这一点，发现虽然配置文件元素存在，但它的样式显然不存在，即使它已经为其定义了内联 css，并且在另一个文件中有大约 250 行。为什么样式属性会显示为空？

Answer 1

jQuery 对象没有样式属性，因为它们是 DOM 对象的数组(具有样式属性)。

你要么想要:

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

或

SET: $('#overlay')[0].style.visibility = 'hidden'
GET: $('#overlay')[0].style.visibility