developer tip

jQuery .hide ()와 .css ( "display", "none")의 차이점

copycodes 2020. 10. 12. 07:45
반응형

jQuery .hide ()와 .css ( "display", "none")의 차이점


차이점이 있습니까?

jQuery('#id').show() and jQuery('#id').css("display","block")

jQuery('#id').hide() and jQuery('#id').css("display","none")

jQuery ( '# id'). css ( "display", "block")

display속성은 그중 여러 가지 값을 가질 수 있습니다 block, inline, inline-block, 및 더 많은 .

.show()메서드는 반드시로 설정하지 않고 block정의한 값으로 재설정합니다 (아마도).

jQuery 소스 코드에서 displayjQuery 조작 이전 속성을 확인하기 위해 속성을 ""(빈 문자열)로 설정하는 방법을 볼 수 있습니다 . little link .

반면에 은닉은를 통해 이루어 지므로 어느 정도 display: none;고려할 수 .hide()있고 .css("display", "none")동등 할 수 있습니다 .

사용하는 것이 권장 .show()하고 .hide()어떤 잡았다의를 (플러스, 그들은 짧은 것) 방지하기 위해 어쨌든.


show ()와 css ({ 'display': 'block'})의 차이점

처음에 이것을 가지고 있다고 가정합니다.

<span id="thisElement" style="display: none;">Foo</span>

전화 할 때 :

$('#thisElement').show();

당신은 얻을 것이다 :

<span id="thisElement" style="">Foo</span>

동안:

$('#thisElement').css({'display':'block'});

수행 :

<span id="thisElement" style="display: block;">Foo</span>

네, 차이가 있습니다.

hide ()와 css ({ 'display': 'none'})의 차이점

위와 같지만 hide () 및 display ':'none '......으로 변경하십시오.

또 다른 차이점 When .hide()을 호출하면 display 속성의 값이 jQuery의 데이터 캐시에 저장되므로 .show()호출되면 초기 표시 값이 복원됩니다!


: 예 둘의 성능 차이가 jQuery('#id').show()보다 느린 jQuery('#id').css("display","block")디스플레이로 JQuery와 캐시에서 초기 상태를 검색하기 위해 수행되어야하는 전자의 경우 추가 작업처럼은 될 수있는 이진 속성되지 않고 inline, block, none, table, 등 유사한 hide()방법 의 경우입니다 .

참조 : http://jsperf.com/show-vs-addclass


차이 없음

매개 변수가없는 .hide () 메서드는 요소를 숨기는 가장 간단한 방법입니다.

$ ( '. target'). hide (); 일치하는 요소는 애니메이션없이 즉시 숨겨집니다. 이는 display 속성의 값이 jQuery의 데이터 캐시에 저장되어 나중에 디스플레이를 초기 값으로 복원 할 수 있다는 점을 제외하면 .css ( 'display', 'none')을 호출하는 것과 거의 동일합니다. 요소의 표시 값이 인라인이면 숨겨지고 표시되며 다시 한 번 인라인으로 표시됩니다.

쇼에 대해서도 동일


네, 차이가 있습니다.

jQuery('#id').css("display","block") 항상 블록으로 표시하려는 요소를 설정합니다.

jQuery('#id').show() 예를 들어 display : inline과 같은 초기 표시 유형에 대한 것입니다.

Jquery 문서 참조


소스 코드를 볼 수 있습니다 (여기서는 v1.7.2).

설정할 수있는 애니메이션을 제외하고는 이전 표시 스타일도 메모리에 유지합니다 (모든 경우가 아닌 ,, ... block수도 있음 ).inlinetable-cell


참조 http://api.jquery.com/show/를

매개 변수가없는 .show () 메서드는 요소를 표시하는 가장 간단한 방법입니다.

$ ( '. target'). show ();

일치하는 요소는 애니메이션없이 즉시 표시됩니다. 이는 디스플레이 속성이 처음에 있던대로 복원된다는 점을 제외하면 .css ( 'display', 'block')을 호출하는 것과 거의 동일합니다. 요소의 표시 값이 인라인이면 숨겨지고 표시되며 다시 한 번 인라인으로 표시됩니다.

참고 URL : https://stackoverflow.com/questions/13562439/difference-between-jquery-hide-and-cssdisplay-none

반응형