offsetTop[index] = $(obj).offset().top; 부분질문
793
작성한 질문수 12
선생님 ! 수업 잘 듣고 있습니다
혹시 offsetTop[index] = $(obj).offset().top; 이 부분에
$(obj)를 자바스크립트로 사용 하고 싶을 땐 어떻게 바꿔야할까요?
시도 해본 방법으로는
obj.offset().top;
obj[index].offset().top;
두 방법으로 시험해봣는데 둘다 오류가 뜨네요
혹시 답변 가능 하실까요?
답변 1
0
안녕하세요 지호님 :)
해당 코드를 바닐라 스크립트로 변경하고 싶을경우 다음과 같이 작성해보세요 ^^
선택자를 $(obj)로 사용하면 안됩니다 :)
$는 jquery를 의미하는거에요!
해당 구문을 바닐라로 변경할땐 다음과 같습니다.
const el = $('.sec1') //제이쿼리
const el = document.querySelector('.sec1'); //바닐라
다음과 같이 querySelector등을 이용해 엘리먼트를 찾으면 됩니다 :)
그리고 오프셋 값을 알고싶다면
const pos = el.getBoundingClientRect(); //엘리먼트의 left,right,bottom,top 위치값을 가지고오는 메소드를 호출해 pos변수에 담고
console.log(pos.top); //pos.top 값을 찾아보면 오프셋 탑값을 알 수 있습니다 :)
이해가 안간다면 해당 코드를 저장해 크롬으로 로그를 확인해보세요 :)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.sec1 {width: 100%; height: 500px; margin-top:200px; background-color: mediumpurple;}
</style>
<div class="sec1"></div>
<script type="text/javascript">
const el = document.querySelector('.sec1');
console.log(el);
const pos = el.getBoundingClientRect();
console.log(pos);
console.log(pos.top);
</script>
</body>
</html>
사용법은 메소드명만 다를뿐 제이쿼리 바닐라 크게 다르지 않으니 다양한 방법을 활용해 익혀보면 좋을것 같습니다.
그럼 또 다른 궁금증이 생길때 문의주세요 ^^
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
0
212
1
반응형에 대해 질문이 있습니다 !
0
384
1
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
0
388
1
함수가 정의되기 전에 함수 호출
0
354
1
섹션12 보너스 챕터에 관한 질문입니다!
0
478
1
5-3-1 강좌 섹션 질문 합니다.
0
324
1
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
1
483
3
화면 높이 관련 질문 있습니다.
1
442
1
선생님
0
378
1
5-2 vanilla.html 질문합니다.
0
429
1
5-3-2 질문입니다.
1
302
1
5-2 추가 질문이요
0
362
2
5-2 ! 질문이요.
0
271
1
안녕하세요!
0
278
1
질문드립니다.
1
372
2
질문드립니다.
0
1680
3
색션6강 카운트관련 문의드립니다!
0
246
1
섹션5 관련 질문드립니다.
0
273
1
setProperty 를 재활용 하고싶습니다.
0
219
1
IntersectionObserver
0
260
1
offsetheight와 scrollheight
0
402
1
완성된코드를 그대로 가져왔는데 크기가 이상해요
0
436
2
2:56에 10씩 증가시키는건 어떻게 하신건가요?
0
320
1
<script>에 $(function(){})으로 감싸준 이유
0
212
1