CSS样式为null

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.我提出警告试图抓住这个并发现虽然profile元素存在,但它的样式显然不会为它定义内联css,以及另一个文件中的大约250行.为什么style属性显示为null？

Answer 1

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

你要么:

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

要么

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