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时将其删除。来自CSS的原始display: none就是剩下的。

在边距旁边加入一个可见的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";

Example

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

1 个答案: