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.
브라우저 지원.
구문
[접근]
[설정]
[속성값]
