我正在尝试使用 Javascript 将我的一些元素定位在屏幕/窗口上。我这样做是为了确保无论用户屏幕的尺寸如何，我的元素始终位于中心。
我知道填充和边距也可以实现这一点，但我使用的是一个名为 raphael.js 的自定义移动脚本，& 为了移动我的元素，我需要绝对设置我的元素(它是一个自定义主页页面，您在其中单击 block (即链接)，它们会飞出屏幕)。
我移动元素的 javascript 函数无法移动我的元素。关于如何使用 javascript 定位我的元素的任何建议都会非常有帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="dropDownMenu.js"></script>
<title></title>
<script src="javascript/raphael.js"></script> <!-- I am using a custom drawing/moving script which is why I cant put the img(id=bkImg) inside the div element -->
<script LANGUAGE="JavaScript" type = "text/javascript">
<!--
function getScreenSize()
{
var res = {"width": 630, "height": 460};
if (document.body)
{
if (document.body.offsetWidth) res["width"] = document.body.offsetWidth;
if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
}
if (window.innerWidth) res["width"] = window.innerWidth;
if (window.innerHeight) res["height"] = window.innerHeight;
alert( res["width"] );
alert( res["height"] );
return res;
}
function positionBlocksAccordingToScreenSize()
{
// The problem is that the blocks position does not change but they should?
var scrDim = getScreenSize();
var BK_WIDTH = 800;
var BK_HEIGHT = 600;
var X_OFFSET = (scrDim["width"]-BK_WIDTH) / 2; // variable that changes according to the width of the screen
var BLOCK_POS_X = [160, 80, 280, 20, 200, 400];
var BLOCK_POS_Y = [26, 203, 203, 380, 380, 380];
for ( var i=1; i<=5; i++ )
{
//document.getElementById("block"+i).setAttribute( "offsetLeft", X_OFFSET + BLOCK_POS_X[i] ); // doesn't work
//document.getElementById("block"+i).setAttribute( "offsetTop", BLOCK_POS_Y[i] ); // doesn't work
document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i]; // doesn't work
document.getElementById("block"+i).style.top = BLOCK_POS_Y[i]; // doesn't work
}
}
-->
</script>
<style type="text/css" media="all">
<!--
@import url("styles.css");
#blockMenu { z-index: -5; padding: 0; position: absolute; width: 800px;
height: 600px; /*background-image: url("images/menuBk.png");*/ }
#bkImg { z-index: -5; position: relative; }
#block1 { z-index: 60; position: absolute; top: 26px; left: 160px; margin: 0; padding: 0; }
#block2 { z-index: 50; position: absolute; top: 203px; left: 80px; margin: 0; padding: 0; }
#block3 { z-index: 40; position: absolute; top: 203px; left: 280px; margin: 0; padding: 0; }
#block4 { z-index: 30; position: absolute; top: 380px; left: 20px; margin: 0; padding: 0; }
#block5 { z-index: 20; position: absolute; top: 380px; left: 200px; margin: 0; padding: 0; }
#block6 { z-index: 10; position: absolute; top: 380px; left: 400px; margin: 0; padding: 0; }
-->
</style>
</head>
<body onload="positionBlocksAccordingToScreenSize()" style="margin-top: 10%; text-align: center; margin-bottom: 10%; position: relative;">
<img id="bkImg" src="images/menuBk.png" width="800px;" height="600px" alt=""/>
<!-- The above image should be displayed behind the below div. I am using the raphael.js movement script, so I cannot place
this image inside the div, because it will get erased when I call raphael.clear(); -->
<div id="blockMenu">
<div id="block1"><a href="javascript:onBlockClick('block1')"><img src="images/block1.png" width="200" height="200"/></a></div>
<div id="block2"><a href="javascript:onBlockClick('block2')"><img src="images/block2.png" width="200" height="200"/></a></div>
<div id="block3"><a href="javascript:onBlockClick('block3')"><img src="images/block3.png" width="200" height="200"/></a></div>
<div id="block4"><a href="javascript:onBlockClick('block4')"><img src="images/block4.png" width="200" height="200"/></a></div>
<div id="block5"><a href="javascript:onBlockClick('block5')"><img src="images/block5.png" width="200" height="200"/></a></div>
<div id="block6"><a href="javascript:onBlockClick('block6')"><img src="images/block6.png" width="200" height="200"/></a></div>
</div>
</body>
</html>
最佳答案
您没有正确设置 left 和 top 属性，您需要添加单位，例如“px”表示像素。
document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i] + 'px';
document.getElementById("block"+i).style.top = BLOCK_POS_Y[i] + 'px';
关于javascript - 使用 Javascript 在屏幕上定位元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5616795/