Javascript似乎无法正确处理以后显示的隐藏元素

Question

我很难理解Javascript / CSS的以下行为。

我正在尝试创建一个模态div，将其用作画廊的放大照片。 我想在屏幕上显示这个死点。 如果我将div定义为display：none，然后通过Javascript进行更改，则它似乎无法正常运行。

我理解只使用下面的示例1会更简单，并且不必先隐藏div。 但是，我想做的是使用display：none在HTML中定义div，然后再显示它。 我不想用Javascript创建div。 以下是说明问题的最简单方法。

下面的示例1可以正常工作。 示例2仅在注释掉设置边距的最后一行时才有效。 如果这样做，那么div消失了。

示例1-按预期工作

CSS

#photoviewdiv{
  position: fixed;
  /*display: none;*/
  width: 70%;
  top: 50%;
  left: 50%;
  background: white;
  z-index:1000;
}

JS

var photoviewdiv = document.createElement("div");
photoviewdiv.setAttribute("id", "photoviewdiv");
document.body.appendChild(photoviewdiv);
//photoviewdiv.style.display = "inline";

photoviewdiv.innerHTML = "Hello";
var viewerwidth = photoviewdiv.offsetWidth;
var viewerheight = photoviewdiv.offsetHeight;

photoviewdiv.setAttribute("style",
    "margin-left: -" + viewerwidth/2 +"px; margin-top: -" + viewerheight/2 +"px");

示例2-仅工作到设置页边距-然后photoviewdiv消失

CSS

#photoviewdiv{
  position: fixed;
  display: none;
  width: 70%;
  top: 50%;
  left: 50%;
  background: white;
  z-index:1000;
}

JS

var photoviewdiv = document.createElement("div");
photoviewdiv.setAttribute("id", "photoviewdiv");
document.body.appendChild(photoviewdiv);

photoviewdiv.style.display = "inline";

photoviewdiv.innerHTML = "Hello";
var viewerwidth = photoviewdiv.offsetWidth;
var viewerheight = photoviewdiv.offsetHeight;

photoviewdiv.setAttribute("style",
    "margin-left: -" + viewerwidth/2 +"px; margin-top: -" + viewerheight/2 +"px");

Answer 1

您正在设置style.display = inline ，但是稍后在将style减小为margin-left和margin-top时将其删除。 原始display: none仅剩CSS了。

在边距旁边包括一个可见的display属性：

photoviewdiv.setAttribute("style",
 "margin-left: -" + viewerwidth/2 + "px; " +
 "margin-top: -" + viewerheight/2 +"px; " +
 "display: block");

或者：

photoviewdiv.style.display    = "block";

var viewerwidth = photoviewdiv.offsetWidth;
var viewerheight = photoviewdiv.offsetHeight;

photoviewdiv.style.marginLeft = "-" + viewerwidth  / 2 + "px";
photoviewdiv.style.marginTop  = "-" + viewerheight / 2 + "px";

例