jQuery 절대 위치 지정 및 경계 문제

경계선과 함께 절대 위치 지정을 위해 2 div를 정의한 샘플 HTML5 파일을 둘러싸고 있습니다. 둘 다 작동하지 않습니다. 좀 도와 줄 수있어? 나는 오랫동안 여기에 붙어 있고 여러 순열, 내가 웹에서 본 것들의 조합을 시도했습니다. CSS 등에서 사용하기 위해이 파일에 정의 된 변수를 사용해야합니다.jQuery 절대 위치 지정 및 경계 문제

미리 도움을 주셔서 감사합니다. 동봉 된 파일을 변경 한 후 전체 파일을 게시 할 수 있다면 정말 감사하겠습니다. 감사합니다,

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

조금만 읽으면 다치게되지 않을 것입니다. 나는 $ (document) .ready()가 모든 jQuery 튜토리얼의 시작 부분에서 언급되었다고 확신한다. – ZolaKt

아직 작성되지 않은 요소를 조작하려고합니다. 즉, div가 DOM에 추가되기 전에 스크립트가 실행 중이므로 jQuery가 해당 div를 찾을 수 없습니다. 스크립트를 맨 아래로 이동하거나 함수에 모든 것을 넣은 다음 해당 함수를 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을합니다. 그냥 .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 절대 위치 지정 및 경계 문제

답변

관련 문제