元素不在javascript中定义的区域内
我编写了一个基本程序,可以在DIV元素中移动一个按钮。按钮不在我预定的区域内。在HTML端,我有一段代码,用id=“page”定义DIV。下面是js代码。为什么按钮不在DIV元素中元素不在javascript中定义的区域内,javascript,size,element,Javascript,Size,Element,我编写了一个基本程序,可以在DIV元素中移动一个按钮。按钮不在我预定的区域内。在HTML端,我有一段代码,用id=“page”定义DIV。下面是js代码。为什么按钮不在DIV元素中 var buttonState = document.getElementById("clickMe"); var maxWidth = document.getElementById("page"); var maxHeight = document.getElementById("page"); var page
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>