[DOM_Style] JS - translate 속성 - 2D/3D 상 요소 위치 좌표 변경 설정/반환 (= translate속성 = 트랜슬레이트속성)

목차

1. translate 예제 - 위치 설정
2. translate 정의
3. translate 구문
4. translate 예제 - 위치 반환

translate 예제 - 위치 설정

 

<style>

#hz {

  height: 50px;

  width: 50px;

  background-color: red; 

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz"></div>

 

<script>

function homzzang() {

    var hz = document.getElementById('hz');

    hz.style.translate = "100px 50px";

}

</script>

 

결과보기

translate 정의

 

2D/3D 상 요소 위치 설정/반환.

 

PS. 자세한 설명은 CSS translate 속성 참고.

translate 구문

 

반환 (※ 인라인스타일로 정의된 경우에만 반환됨.)

object.style.translate

 

설정

object.style.translate="x-axis y-axis z-axis|initial|inherit"

 

---

[속성값]

 

CSS translate 속성 참고.

 

---

[반환값]

 

요소의 위치를 나타내는 문자열 반환.

 

translate 예제 - 위치 반환

 

<style>

#hz {

  height: 50px;

  width: 50px;

  background-color: red; 

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="demo"></div>

<div id="hz" style="translate: 100px 50px;"></div>

 

<script>

function homzzang() {

    var x = document.getElementById('hz').style.translate;

    document.getElementById('demo').innerHTML = x;

}

</script>

 

결과보기

PS. (내부스타일/외부스타일)로 정의된 경우엔 반환 X