offset()은 요소의 left, top값을 get또는 set 할 수 있는 메서드입니다.
먼저 요소의 left,top값을 get하는 방법을 알아 볼게요
<형식>
$(선택자).offset().left
$(선택자).offset().top
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position:absolute;left:20px;top:50px;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var offset = $('div').offset();
$('p').html(offset.left + '/' + offset.top);
});
</script>
</head>
<body>
<p></p>
<div>컨텐츠</div>
</body>
</html>
set하는 형식은
$(선택자).offset({left:값,top:값})
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
div{width:100px;height:100px;background:red;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$('div').offset({left:30,top:50});
});
</script>
</head>
<body>
<div>컨텐츠</div>
</body>
</html>
먼저 요소의 left,top값을 get하는 방법을 알아 볼게요
<형식>
$(선택자).offset().left
$(선택자).offset().top
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position:absolute;left:20px;top:50px;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var offset = $('div').offset();
$('p').html(offset.left + '/' + offset.top);
});
</script>
</head>
<body>
<p></p>
<div>컨텐츠</div>
</body>
</html>
set하는 형식은
$(선택자).offset({left:값,top:값})
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
div{width:100px;height:100px;background:red;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$('div').offset({left:30,top:50});
});
</script>
</head>
<body>
<div>컨텐츠</div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 6615 | |
| 6614 | |
| 6606 | |
| 19438 |
JavaScript
audio 음악이 끝났을때 이벤트를 넣을 수 있나요?
1
|
| 6604 | |
| 6592 | |
| 6588 | |
| 6586 | |
| 6583 | |
| 6577 | |
| 19437 |
JavaScript
캔버스 ( html5 ) 그림 그리기3
|
| 6576 | |
| 6575 | |
| 6574 | |
| 19435 | |
| 27715 | |
| 6571 | |
| 6570 | |
| 6562 | |
| 6559 | |
| 6553 | |
| 6552 | |
| 6551 | |
| 6548 | |
| 24572 | |
| 6545 | |
| 6544 | |
| 6543 | |
| 6541 | |
| 6539 | |
| 6527 | |
| 6526 | |
| 6524 | |
| 6519 | |
| 6516 | |
| 27701 | |
| 27699 | |
| 6515 | |
| 19434 |
JavaScript
캔버스 ( html5 ) 그림 그리기2
|
| 6514 | |
| 19433 |
JavaScript
캔버스 ( html5 ) 그림 그리기
|
| 6503 | |
| 19432 |
jQuery
파일 첨부시심플하게 버튼으로만 되게..
|
| 6500 | |
| 6497 | |
| 6496 | |
| 6491 | |
| 6485 | |
| 32041 | |
| 6483 | |
| 6479 | |
| 6478 | |
| 6475 | |
| 6473 | |
| 6467 | |
| 6465 | |
| 6462 | |
| 27697 | |
| 6454 | |
| 6451 | |
| 27695 | |
| 6446 | |
| 6440 | |
| 6437 | |
| 27688 | |
| 6433 | |
| 6430 | |
| 6427 | |
| 6426 | |
| 6422 | |
| 6421 | |
| 6418 | |
| 27686 | |
| 27678 | |
| 6414 | |
| 6410 | |
| 6404 | |
| 6400 | |
| 6398 | |
| 6389 | |
| 6384 | |
| 6383 | |
| 6378 | |
| 6370 | |
| 6363 | |
| 6348 | |
| 6338 | |
| 6329 | |
| 6328 | |
| 6316 | |
| 6309 | |
| 6299 | |
| 6296 | |
| 27674 | |
| 27671 | |
| 6293 | |
| 6282 | |
| 24570 | |
| 6277 | |
| 6264 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기