CSS:: style이 적용되지 않는 오류 수정(!important, removeAttribute)

 

 

 

화면 정가운데에 떠야하는 팝업창이 모니터 끄트머리에 잘려서 보이는 오류가 발생했다.

 

 

 

 

디버깅을 해보니 코드에서 설정하지 않은 스타일이 적용되어 내가 지정한 스타일이 먹지 않았다.

 

 

 

 

이를 해결하기 위해서는 두 가지 방법이 있다.

 

 

 

 

1. !important 사용

{
	top:-766px; 
    left: 0px !important; 
    z-index: 4 !important;
}

지정한 스타일에 !important를 넣어 우선순위를 주면 된다.

 

 

element.style에 있는 스타일 값이 적용되지 않고 내가 css파일에서 설정한 스타일 값이 적용되었다.

 

 

 

2. 자바스크립트로 스타일을 제거

document.querySelector('#id').removeAttribute('style');

querySelector와 removeAttribute를 사용하여 제거해준다.

 

 

show : function(){
    document.querySelector('#L_p04').removeAttribute('style');
    $(this.$el).show();
},

화면을 띄워주는 메서드에 넣어준다.

 

 

 

element.style에 조건값이 제거되고 밑의 클래스의 스타일이 잘 적용된 것을 확인할 수 있다.