목차
clientX 예제 - H2 요소 클릭 시, 현재창 기준 커서 x좌표 표시
clientX 정의
clientX 구문
clientX 예제 - DIV 요소 허버 시, 현재창 기준 커서 x좌표 표시
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>
결과보기
주소 복사
랜덤 이동