Question

注意：：我在项目中使用setAttribute没问题。这只是一个问题，为什么有些东西不起作用。

我已经制作了一个基本的.js，.html和.css文件。这是每个代码：

//Load Document
window.onload = () => {
  //get Body Height and Width
  let body = document.body;
  let html = document.documentElement;
  let bH = Math.max(body.offsetHeight, body.scrollHeight, body.clientHeight, html.offsetHeight, html.scrollHeight, html.clientHeight);
  let bW = Math.max(body.offsetWidth, body.scrollWidth, body.clientWidth, html.offsetWidth, html.scrollWidth, html.clientWidth);
  console.log(`Body Height: ${bH}px`);

  //get document elements
  const menu = document.getElementById("getMenu");
  const menuMarginTB = (bH - menu.offsetHeight) / 2;
  //menu.setAttribute("style", "margin:"+menuMarginTB+"px auto;");
  menu.style.margin = `${menuMarginTB}px auto;`;
};

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  height: 100%;
  width: 100%;
}

.menu {
  height: 400px;
  width: 600px;
  border: 1px solid white;
}

<!DOCTYPE html>
<html>

<head>
  <title>Random Website</title>
  <link href="./main.css" type="text/css" rel="stylesheet" />
  <script defer src="./main.js" type="text/javascript"></script>
</head>

<body>
  <div id="getContainer" class="container">
    <div id="getMenu" class="menu">

    </div>
  </div>
</body>

</html>

我已将setAttribute注释掉，因为它可以工作，但是当我尝试使用.style.margin时却无法工作。控制台中不会弹出任何错误（我使用的是Google Chrome）。我不知道为什么它不起作用。这是我尝试过的：

我尝试使用document.onload和document.addEventListener("DOMContentLoaded", ...);，但都失败了。我目前正在使用window.onload，但也无法使用。
我尝试从脚本标签中删除defer；但是，defer仅假定在解析每个HTML元素之后运行此脚本（据我所知），我不知道将其删除或保留会对.style.margin有什么影响。
我尝试将id的名称从"menu"更改为"getMenu"。我以为id和class具有相同的名称不仅是不道德的做法，而且会影响.style.margin的工作方式。但是，当我改变它时似乎并没有真正帮助。
我尝试了concatenating而不是interpolating字符串。我以为模板插值可能不适用于我正在使用的模板，但是字符串串联似乎无济于事。

[注意：：我可能已经尝试了更多的方法，但我不记得了。]

我认为此问题扩展到所有.style属性，因为在查看Google Chrome浏览器开发工具时，所有属性都是空白，即使它们是在.css文件中分配的。

Proof 1 我已经将height分配给400px，但是在这里它显示为""。使用断点运行.js文件的最后一行后，会发生同样的事情。当我将鼠标悬停在menu.style.margin上时，也会产生""。 Proof 2

我唯一能想到的是，可能没有加载某些东西导致发生这种情况，但是即使它没有加载，我也不知道如何解决。在这方面的任何帮助都将不胜感激。

Answer 1

这实际上是一个非常简单的错误：）

element.style = value仅在value是此CSS属性的有效值时有效。在您发布的代码中不是：您不能在字符串中包含分号。

JavaScript：setAttribute有效，但.style不起作用

1 个答案: