Question

我附上一个示例HTML5文件，其中我已经定义了2个div用于绝对定位以及边框。两者都不起作用。你能帮忙吗？我被困在这里很长一段时间，并尝试了多种排列，我在网上看到的组合。请注意，我需要使用此文件中定义的变量与css等一起使用。

提前感谢您的帮助。如果您可以在更改所附文件后发布整个文件，我们将非常感激。问候，sbguy

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning Test</title>
<style type="text/css">
html, body {
    position:absolute; 
    top:0;
    right:0;
    margin:0px;
    padding:0px 0px 0px 0px;
    height:100%;
    width:100%;
}
div {
    position:absolute;
    margin:0px;
    padding:0px 0px 0px 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
var A_height = 100;
var A_width = 100;
var A_top = 20;
var A_left = 20;
var B_height = 200;
var B_width = 200;
var B_top = 200;
var B_left = 200;
jQuery("#A").css({ "width": A_width, "height": A_height, "border":'1px solid black'});
jQuery("#B").css({ "width":B_width, "height":B_height, "border":'1px solid black'});
jQuery("#A").offset({top: A_top, left: A_left});
jQuery("#B").offset({top: B_top, left: B_left});
</script>
</head>
<body>
<div id="A">
<p>HELLO A</p>
</div>
<div id="B">
<BR></BR>
<p>HELLO B</p>
</div>
</body>
</html>

Answer 1

您正在尝试操纵尚未创建的元素。换句话说，脚本在将div添加到DOM之前执行，因此jQuery无法找到它们。将脚本移动到底部或将所有内容放在函数中并将该函数传递给jQuery，以便在页面加载时调用它（请参阅.ready（）方法）。在下面的示例代码中，我只是将脚本块移动到了最后。其他所有内容与原始代码基本不变。

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning Test</title>
<style type="text/css">
html, body {
    position:absolute;
    top:0;
    right:0;
    margin:0px;
    padding:0px 0px 0px 0px;
    height:100%;
    width:100%;
}
div {
    position:absolute;
    margin:0px;
    padding:0px 0px 0px 0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="A">
        <p>HELLO A</p>
    </div>
    <div id="B">
        <BR></BR>
        <p>HELLO B</p>
    </div>

<script type="text/JavaScript">
var A_height = 100;
var A_width = 100;
var A_top = 20;
var A_left = 20;
var B_height = 200;
var B_width = 200;
var B_top = 200;
var B_left = 200;
jQuery("#A").css({ 'width': A_width, 'height': A_height, 'border':'1px solid black'});
jQuery("#B").css({ 'width': B_width, 'height': B_height, 'border':'1px solid black'});
jQuery("#A").offset({top: A_top, left: A_left});
jQuery("#B").offset({top: B_top, left: B_left});
</script>

</body>
</html>

Answer 2

这是working。只需用.ready()包装你的javascript代码即可。像这样：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning Test</title>
<style type="text/css">
html, body {
    position:absolute; 
    top:0;
    right:0;
    margin:0px;
    padding:0px 0px 0px 0px;
    height:100%;
    width:100%;
}
div {
    position:absolute;
    margin:0px;
    padding:0px 0px 0px 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
jQuery(function($) {
    var A_height = 100;
    var A_width = 100;
    var A_top = 20;
    var A_left = 20;
    var B_height = 200;
    var B_width = 200;
    var B_top = 200;
    var B_left = 200;
    jQuery("#A").css({ "width": A_width, "height": A_height, "border":'1px solid black'});
    jQuery("#B").css({ "width":B_width, "height":B_height, "border":'1px solid black'});
    jQuery("#A").offset({top: A_top, left: A_left});
    jQuery("#B").offset({top: B_top, left: B_left});
});
</script>
</head>
<body>
<div id="A">
<p>HELLO A</p>
</div>
<div id="B">
<BR></BR>
<p>HELLO B</p>
</div>
</body>
</html>

Answer 3

此脚本有效：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning Test</title>
<style type="text/css">

html, body {
    position:absolute; 
    top:0;
    right:0;
    margin:0px;
    padding:0px 0px 0px 0px;
    height:100%;
    width:100%;
}
div {
    position:absolute;
    margin:0px;
    padding:0px 0px 0px 0px;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
 A_height = 100;
 A_width = 100;
 A_top = 20;
 A_left = 20;
 B_height = 200;
 B_width = 200;
 B_top = 200;
 B_left = 200;
$("#A").css({ "width": A_width, "height": A_height, "border":'1px solid black'});
$("#B").css({ "width":B_width, "height":B_height, "border":'1px solid black'});
$("#A").offset({top: A_top, left: A_left});
$("#B").offset({top: B_top, left: B_left});
                           });
</script>
</head>
<body>
<div id="A">
<p>HELLO A</p>
</div>
<div id="B">
<BR></BR>

<p>HELLO B</p>
</div>
</body>
</html>

jQuery绝对定位＆amp;边界问题

3 个答案: