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

Question

I am having difficulty understanding the following behaviour of Javascript / CSS.

I am attempting to create a modal div which will serve as an enlarged photo from a gallery. I want to display this dead centre on screen. If I define the div as display: none and then change this via Javascript, it doesn't seem to work as I would expect.

I appreciate it would be simpler to just use Example 1 below and it isn't necessary to hide the div first. What I would like to do, however, is define the div in HTML with display: none and then display it later. I don't want to have to create the div with Javascript. The below is simply the easiest way to illustrate the issue.

Example 1 below works as you might expect. Example 2 works only if you comment out the last line which sets the margins. If you do, then the div vanishes.

Example 1 - Works as expected

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");

Example 2 - Only works up until set margins - then photoviewdiv disappears

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

You're setting style.display = inline , but later removing it when you reduce style to just margin-left and margin-top . The original display: none from the CSS is all that's left.

Include a visible display property alongside the margins:

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

Alternatively:

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