"display : none;"을 설정하여 DOM 요소를 숨기거나 표시하는 @media 쿼리가 있습니다. 화면 방향에 따라. 다음 CSS는 잘 작동합니다.
@media all and (orientation: landscape) {
#header-container {
display: none;
}
}
그러나 내 자바 스크립트에서 동일한 요소를 숨기고 표시하면 미디어 쿼리가 중단되는 것 같습니다. 예를 들면
//JS
this.element.find('#header-container').css(display: "none");
//And later..
this.element.find('#header-container').fadeIn(500);
요소가 더 이상 방향에 따라 숨겨 지거나 표시되지 않습니다.
내 생각 엔 .fadeIn () 메서드가 표시 속성에 새 값을 설정하고이 문제를 해결하는 유일한 방법은 미디어 쿼리에! important를 넣는 것입니다.
@media all and (orientation: landscape) {
#header-container {
display: none !important;
}
}
DOM 조작 후에도 미디어 쿼리를 영구적으로 만드는 유일한 방법은! important입니까?
jQuery를 사용하는 애니메이션 / CSS는 일반적으로 style해당 스타일로 속성을 수정합니다 . 그래서 display거기에 어떤 속성을 쓰면 CSSin 스타일 시트를 덮어 씁니다 .
<div id="header-container" style="display:block;opacity:1"></div>
@media all and (orientation: landscape) {
#header-container {
display: none;
}
}
이 때문에, 어떤 상황 위와 같이해야 display될 것 block대신에 none. 인라인 스타일이 가장 높은 우선 순위를 갖습니다 ( 중요한 사용은 예외 ) . 또한 media-query 에는 추가 우선 순위가 없으며 IF 문처럼 작동합니다.
한편, 다음과 [important][1]같이 이미 수행 한 인라인 스타일을 재정의 할 수 있습니다 .
@media all and (orientation: landscape) {
#header-container {
display: none !important;
}
}
분명히 스타일 시트 내에서 인라인을 재정의하는 다른 방법 은 없습니다 CSS. 그것에 대해 생각한다면 , DOM 노드 자체에 속성을 직접 쓰는 것보다 더 구체적인 DOM 노드에 대한 참조가있을 수 없습니다 .CSSstyle
시나리오에서 애니메이션 style을 수행 한 후 요소를 재설정 할 수 jQuery있으므로 style이후 재설정 fadeIn이 완료됩니다.
this.element.find('#header-container').fadeIn(500, function(){
$(this).attr('style', '');
});
다른 사례를 우선 순위로 간단히 나열하려면 다음을 수행하십시오.
! important 키워드로 "스타일 속성"에 선언 된 스타일.
! important 속성을 사용하여 "스타일 시트"에 선언 된 스타일.
스타일 속성에 선언 된 일반 스타일 (! important 속성 없음).
스타일 시트의 일반 스타일.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다