728x90 300x250 SMALL javaScript/jQuery148 [jQuery]마우스 클릭한 위치 값 가져오기 마우스 클릭 좌표값 가져오는 이벤트 객체 종류 pageX, pageY 웹브라우저 전체 페이지의 왼쪽 가장자리를 기준으로 좌표를 표시 문서의가장 자리를 기준으로 하기 때문에 스크롤을 고려하여 스크롤될 때마다 좌표값이 변경 된다. event.pageX //x위치 값 event.pageY //y위치 값 clientX, clientY 사용자에게 보여지는 페이지 영역 기준 좌표를 표시 스크롤바가 존재하고, 스크롤 되더라도 특정 지점의 clientX, clientY 값은 동일하다. event.clientX //x위치 값 event.clientY //y위치 값 screenX, screenY 사용자 모니터 화면 기준으로 왼쪽 상단 모서리(0, 0)부터 좌표값 표시 event.screenX //x위치 값 event.sc.. 2023. 4. 1. 전역 위치 설정하기 offset offset() $대상.offset({left:좌표값, top:좌표값}) jQuery의 offset()메서드를 사용하면 전역 위치를 읽는것 뿐만 아니라 설정할 수도 있다. 다음은 offset() 메서드를 활용한 예제이다. 마우스 클릭한 지점으로 캐릭터 이동 시키기 마우스를 클릭하면 pageX, pageY이벤트 객체를 이용해서 left와 top 위치 값을 가져온 뒤에 offset을 이용해서 설정한다. 2023. 3. 31. 전역 위치 값 구하기 offset() 전역 좌표는 최상위 노드인 document의 위치 값 left:0, top:0을 시작점으로 하여 계산하는 좌표를 말한다. offset() $대상.offset().left $대상.offset().top 최상위 노드인 문서 (Document)를 기준으로 전역 좌표를 구할때는 jQuery에서 제공하는 offset()메서드를 사용할 수 있다. Hello2nd Paragraph 마지막 p태그의 전역 좌표 값을 구해서 마지막 p태그위치에 loft, top 위치를 출력 출처 : https://api.jquery.com/offset/ 2023. 3. 30. 부모좌표 기준으로 지역 위치 설정하기 css() 정렬 변경 css()메서드를 사용해서 부모좌표 기준으로 지역 위치를 설정할 수 있다. $대상.css("left/top",값) $대상.css({ left:값, top:값 }) 위치 값은 숫자 또는 문자열 모두 가능하며 숫자 값인 경우 jQuery 내부에서 자동으로 기본 단위인 "px"를 붙여서 처리한다. 정렬 버튼을 클릭하면 숫자가 대각선 모양으로 정렬 되도록 정렬 1 2 3 4 5 2023. 3. 29. 이전 1 ··· 13 14 15 16 17 18 19 ··· 37 다음 728x90 반응형 LIST