모바일

가로 세로모드일시 클래스 바꿔치기

어렸을때 2011. 6. 30. 10:32
<style type="text/css">
.section_service {width:100%;border-bottom:1px #a8adaf solid;background:url(img/bg_shopping.png) center bottom no-repeat;}
.section_service_wide {width:100%;border-bottom:1px #a8adaf solid;background:url(img/bg_shopping480.png) center bottom no-repeat;}
</style>

<script>
window.onorientationchange = function() {
  var orientation = window.orientation;
  switch(orientation) {
    case 0:
        document.getElementById('myService').setAttribute('class','section_service'); // 세로모드일시
        <!-- myService 아이디를 찾아라 //-->  <!-- 클래스를 section_service 로 바꿔준다 //->
        break; 
    case 90:
    	document.getElementById('myService').setAttribute('class','section_service_wide'); // 가로모드일시
        <!-- myService 아이디를 찾아라 //-->  <!-- 클래스를 section_service 로 바꿔준다 //->
        break;
    case -90: 
    	document.getElementById('myService').setAttribute('class','section_service_wide'); // 가로모드일시
        <!-- myService 아이디를 찾아라 //-->  <!-- 클래스를 section_service 로 바꿔준다 //->
        break;
  }
}
</script>

<div id="myService" class="section_service">
</div>