[DOM_Style] JS - order 속성 - 플렉스아이템 나열순서 (= 오더속성 = flex item order속성, IE11)

order 예제 

 

<style> 

#hz {

  width: 400px;

  height: 150px;

  border: 1px solid silver;

  display: -webkit-flex; /* Safari */

  display: flex;

}

#hz div {

  width: 70px;

  height: 70px;

}

</style>

<div id="hz">

  <div style="background-color:coral;" id="a">a4</div>

  <div style="background-color:lightblue;" id="b">b3</div>

  <div style="background-color:lightgreen;" id="c">c1</div>

  <div style="background-color:pink;" id="d">d2</div>

</div>

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

<script>

function homzzang() {

  /* Safari 6.1 and newer versions */

  document.getElementById("a").style.WebkitOrder = "4";

  document.getElementById("b").style.WebkitOrder = "3";

  document.getElementById("c").style.WebkitOrder = "1";

  document.getElementById("d").style.WebkitOrder = "2";

  /* Standard syntax */

  document.getElementById("a").style.order = "4";

  document.getElementById("b").style.order = "3";

  document.getElementById("c").style.order = "1";

  document.getElementById("d").style.order = "2";

}

</script>

 

결과보기

 정의 

 

 

 

---

 

 

.

기본값: 

반환값: 를 나타내는 문자열

CSS속성: 
CSS버전: CSS

4.

브라우저 지원. 

 

 구문 

 

[접근]

 

 

[설정]

 

---

 

[속성값]