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

 

결과보기