jQuery絕對定位和邊框問題

我附上了一個示例HTML5文件，其中我定義了2個div用於絕對定位以及邊框。兩者都不起作用。你能幫忙嗎？我在這裏呆了很長時間，並嘗試了多種排列方式，即我在網絡上看到的組合。請注意，我需要使用此文件中定義的變量來使用CSS等。jQuery絕對定位和邊框問題

在此先感謝您的幫助。如果您可以在對封裝文件進行更改後發佈整個文件，我們將非常感激。問候，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>

來源

2011-12-19 user1104170

什麼不起作用？ – mrtsherman 2011-12-19 07:44:20

讀一點你自己不會傷害。我非常肯定$（document）.ready（）在每個jQuery教程的開頭都提到了 – ZolaKt 2011-12-19 08:14:29

您正在嘗試操作尚未創建的元素。換句話說，腳本在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>

來源

2011-12-19 07:55:28

-1

此腳本工作：

<!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>

來源

2011-12-19 07:55:44

這是working。只需要將您的javascript代碼換成.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="//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>

來源

2011-12-19 07:56:20

jQuery絕對定位和邊框問題

回答

相關問題