• Q&A
  • 회원가입
  • 로그인

[DOM_Event] JS - clientX 속성 - 현재창 기준 마우스커서 수평 좌표 위치 (= clientX속성 = 클라이언트엑스 속성)

목차

  1. clientX 예제 - H2 요소 클릭 시, 현재창 기준 커서 x좌표 표시
  2. clientX 정의
  3. clientX 구문
  4. clientX 예제 - DIV 요소 허버 시, 현재창 기준 커서 x좌표 표시
  5. clientX 예제 - DIV 요소 클릭 시, clientX/Y, screenX/Y 표시

 

clientX 예제 - H2 요소 클릭 시, 현재창 기준 커서 x좌표 표시

 

<h2 onclick="showCoords(event)">홈짱닷컴 Homzzang.com</h2>


<p id="demo"></p>


<script>

function showCoords(event) {

  var x = event.clientX;

  var y = event.clientY;

  var coords = "X coords: " + x + ", Y coords: " + y;

  document.getElementById("demo").innerHTML = coords;

}

</script>

 

결과보기

 

clientX 정의

 

마우스 이벤트 발생 시, 클라이언트 영역 (= 현재창) 기준으로 마우스 포인터의 수평 좌표 반환.

 



1. cf.

clientY 속성 - 클라이언트 영역 (= 현재창) 기준 마우스 포인터의 수직 좌표 반환. 

  • clientX / clientY : 현재창 기준.
  • screenX / screenY : 화면 기준.

 

2.

이 속성은 읽기 전용이라 반환만 지원.
※ 설정 불가.


3.

DOM버전: DOM Level 2 Events

 

 

clientX 구문

 

event.clientX

 


PS.

 

event

함수에 사용 시, 매개변수에 기재.

 


[반환값]

 

마우스 포인터의 수평 좌표 나타내는 px단위의 숫자.

 

 

clientX 예제 - DIV 요소 허버 시, 현재창 기준 커서 x좌표 표시

 

<style>

div {

  width: 200px;

  height: 100px;

  border: 1px solid gray;

}

</style>


<div onmousemove="showCoords(event)" onmouseout="clearCoords()">홈짱닷컴 Homzzang.com</div>


<p id="demo"></p>


<script>

function showCoords(event) {

  var x = event.clientX;

  var y = event.clientY;

  var coor = "X coords: " + x + ", Y coords: " + y;

  document.getElementById("demo").innerHTML = coor;

}


function clearCoords() {

  document.getElementById("demo").innerHTML = "";

}

</script>

 

결과보기

 

clientX 예제 - DIV 요소 클릭 시, clientX/Y, screenX/Y 표시

 

<style>

div {

  width: 400px;

  height: 200px;

  border: 1px solid black;

  text-align: center;

}

</style>


<div onclick="showCoords(event)"><p id="hz"></p></div>


<script>

function showCoords(event) {

  var cX = event.clientX;

  var sX = event.screenX;

  var cY = event.clientY;

  var sY = event.screenY;

  var coords1 = "client - X: " + cX + ", Y coords: " + cY;

  var coords2 = "screen - X: " + sX + ", Y coords: " + sY;

  document.getElementById("hz").innerHTML = coords1 + "<br>" + coords2;

}

</script>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012