元素不在javascript中定义的区域内

我编写了一个基本程序，可以在DIV元素中移动一个按钮。按钮不在我预定的区域内。在HTML端，我有一段代码，用id=“page”定义DIV。下面是js代码。为什么按钮不在DIV元素中

var buttonState = document.getElementById("clickMe");
var maxWidth = document.getElementById("page");
var maxHeight = document.getElementById("page");
var pageWidth = maxWidth.clientWidth;
var pageHeight = maxHeight.clientHeight;
var screenWidth = 0;
var screenHeight = 0;
function moveButton() {
    "use strict";
    // Find max width and height of screen and set variables to random number within parameters
    screenWidth = Math.floor(Math.random() * (pageWidth)) + 1;
    screenHeight = Math.floor(Math.random() * (pageHeight)) + 1;  
    console.log(screenWidth);
    console.log(screenHeight);
    // Button position
    buttonState.style.left = (screenWidth) + "px";
    buttonState.style.top = (screenHeight) + "px";
    // Button size
    buttonState.style.width = buttonSize + "em";
    buttonState.style.height = buttonSize + "em";

---

首先，这可能是一个css布局问题，而不是javascript或html

第一条线索是

buttonState.style.left
buttonState.syyle.top

如果您在ChromeDevTools中检查buttonState，您可能会发现布局是：绝对的，这将是它没有按预期布局的一个很好的原因。另一种可能是布局设置为静态

下面是一个链接，提供了有关css布局设置的详细信息：

---

我会尝试的第一件事是打开DevTools并取消选择（删除）buttonState的所有样式，直到找到导致问题的布局。

首先想到的是，这可能是css布局问题，而不是javascript或html

第一条线索是

buttonState.style.left
buttonState.syyle.top

如果您在ChromeDevTools中检查buttonState，您可能会发现布局是：绝对的，这将是它没有按预期布局的一个很好的原因。另一种可能是布局设置为静态

下面是一个链接，提供了有关css布局设置的详细信息：

---

我要尝试的第一件事是打开DevTools并取消选择（删除）buttonState的所有样式，直到找到导致问题的布局。

在屏幕宽度和屏幕高度的等式中，您需要考虑按钮的大小

div是基于左上角的像素定位的，因此如果Math.random（）返回1或非常接近它的值，则除非从最大值中减去按钮大小，否则按钮将从页面中掉出

var buttonWidthPx = buttonState.offsetWidth;
var buttonHeightPx = buttonState.offsetHeight;

screenWidth = Math.floor(Math.random() * (pageWidth - buttonWidthPx)) + 1;
screenHeight = Math.floor(Math.random() * (pageHeight - buttonHeightPx)) + 1;

---

还要确保将按钮的位置设置为相对位置，使其位于div内，而不是文档的绝对位置。

在屏幕宽度和屏幕高度的等式中，您需要考虑按钮的大小

div是基于左上角的像素定位的，因此如果Math.random（）返回1或非常接近它的值，则除非从最大值中减去按钮大小，否则按钮将从页面中掉出

var buttonWidthPx = buttonState.offsetWidth;
var buttonHeightPx = buttonState.offsetHeight;

screenWidth = Math.floor(Math.random() * (pageWidth - buttonWidthPx)) + 1;
screenHeight = Math.floor(Math.random() * (pageHeight - buttonHeightPx)) + 1;

---

还要确保将按钮的位置设置为相对，使其位于div内部，而不是文档的绝对位置。

我不知道您面临的确切问题，因为您没有提供任何HTML/CSS，但请查看fiddle以获得一个工作示例

<div id="page">
    <button id="clickMe">Click Me</button>
</div>

<button id="move">Move Button</button>

---

---

我不知道您面临的确切问题，因为您没有提供任何HTML/CSS，但请查看fiddle以获得一个工作示例

<div id="page">
    <button id="clickMe">Click Me</button>
</div>

<button id="move">Move Button</button>

---