CSS) 네비게이션 한번에 열기

 

element.style 속성과 getComputedStyle() 메소드의 차이**

 

 

html, css로 네비게이션을 만들던 도중, 네비게이션이 한번에 동작하지않고 처음 동작할때는 2번을 클릭해야만 동작했다

 

이 문제를 해결하기위해서는 element.style와 getComputedStyle의 차이를 알아야했다

 

 

 

getComputedStyle() 메소드는 읽기전용* 인 반면,

 

element.style 속성은 새로운 스타일 설정* 하는데에 사용한다

 

그래서 데이터의 속성을 읽어 확인할때 element.style로 확인을 할경우 문제가 발생했다

 

 

 

잘못된 방법)

 

function menuBarEvent(){

 

  if(nav.style.right == "-300px"){ // element.style 속성은 읽기용이아닌, 새로운 스타일 설정용

      console.log("네비게이션 펼치기")

      nav.style.right = "0"

  }else {

      console.log("네비게이션 숨기기")

      nav.style.right="-300px"

  }

}

 

 

 

 

옳은 방법)

 

 

function menuBarEvent(){

    var navStyleRight = window.getComputedStyle(nav).getPropertyValue("right")

// nav에 적용된 css속성을 모두가져온뒤, 거기서 right속성 만 추출

if(navStyleRight == "-300px"){

    console.log("네비게이션 펼치기")

    nav.style.right = "0"

}else {

    console.log("네비게이션 숨기기")

    nav.style.right="-300px"

}

}

 

 

 

 

 

 

이런 현상이 발생하는이유)

 

element.style 속성은 실제로 해당 요소가 가진 style 속성을 불러오는 것.

 

하지만 css로 적용된 해당 요소의 style속성은 실제로 바뀐 값이아닌, 웹페이지에 보여지는 순간에만 css가 적용되어 그렇

 

게 보이는 것이다.

 

다시말해, 실제값이 아닌, 그렇게 보이기만하는 것이라, 실제값을 불러와도 의미가 없다는 말이다.

 

이는 애초에 스타일 속성을 부여하기 위한 용도이지, 불러오는 용도가 아니다

 

대신에, getComputedStyle 메소드를 이용해서, 웹페이지에 보여질때 적용되는 style속성을 불러와서 이를 활용할 수 있다