元素未停留在 javascript 中的定义区域内

Question

我编写了一个在 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";

Answer 1

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

第一个线索是

buttonState.style.left
buttonState.syyle.top

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

这是一个 link，它提供了有关 css 布局设置的详细信息：http://alistapart.com/article/css-positioning-101

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

Answer 2

在 screenWidth 和 screenHeight 的等式中，您需要考虑按钮的大小。

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 内而不是相对于文档的绝对定位。

Answer 3

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

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

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

#page {
    width:300px;
    height: 300px;
    background-color: whitesmoke;
}

#clickMe {
    position: relative;
    top: 0;
    left: 0;
}

var page = document.getElementById("page");
var pageWidth = page.clientWidth;
var pageHeight = page.clientHeight;
var button = document.getElementById("clickMe");
var buttonWidth = button.clientWidth;
var buttonHeight = button.clientHeight;

function moveButton() {
    var x = Math.floor(Math.random() * (pageWidth - buttonWidth));
    var y = Math.floor(Math.random() * (pageHeight - buttonHeight));
    button.style.left = x + "px";
    button.style.top = y + "px";
}

document.getElementById("move").onclick = moveButton;

元素未停留在 javascript 中的定义区域内

Element not staying within defined area in javascript

javascript

size

element