DOM에서 요소를 테스트하는 가장 좋은 방법은 무엇입니까

Question

내가 할 수있는 몇 가지 방법이 있습니다 (알고 있습니다).

테스트 CSS 표시

if ($('#foo').css('display') == 'none') 

테스트 요소가 있는지 I 확인할 수있는 시인성 시인성

if ($('#foo').is(':visible')) 

.

요소는 문서의 공간을 소비하는 경우 눈에 보이는 것으로 간주됩니다. 보이는 요소의 너비 또는 높이가 0보다 큽니다.

가시성이있는 요소 : 숨김 또는 불투명도 : 0은 여전히 ​​레이아웃에서 공간을 사용하기 때문에 으로 볼 수 있습니다.

Source

하지만, 때문에 내가 (사용자가) 표시 여부를 테스트 할 수 없습니다 모두 점에 유의 : 요소를 숨기기

이

에 표시 속성을 설정하여 수행 할 수 있습니다 "none"또는 visibility 속성을 "hidden"으로 설정합니다. 그러나 이러한 두 가지 방법이 다른 결과를 것을 알 수 :

가시성 : 숨겨진 요소를 숨 깁니다,하지만 여전히 이전과 같은 공간을 차지합니다. 요소가 숨겨 지지만 여전히 레이아웃에 영향을줍니다.

display : none 요소를 숨기지 않으며 아무런 공간도 차지하지 않습니다. 요소가 거기 인 것처럼 요소는 숨겨집니다, 페이지가 표시됩니다 : 요소가 모든 의미로 볼 경우

내가 테스트 예제도에 따라서

Source

사용자.

그래서 제 질문은 : 위의 두 가지의 경우 코드의 차이점 뭐하는

• ?
• 은 어떤 요소가 사용자에게 표시하는 경우 테스트하는 가장 좋은 방법 :

내가 같은 것을 사용해야 하는가 :

if ($('#foo').is(':visible') && 
    $('#foo').css('opacity') > 0 && 
    $('#foo').css('visibility') != 'hidden') 

Answer 1

내가 가장 좋은 건 같은 사용자 정의 기능을 구현하는 것입니다 생각 아래에 나와 있고 새로운 것이 나오면 테스트하고 개선하십시오.

$.fn.isReallyVisible = function() { //rename function name as you like.. 
    return (this.css('display') != 'none' && 
      this.css('visibility') != 'hidden' && 
      this.css('opacity') > 0); 
} 

위의 내용은 브라우저 간 증명이되어야합니다. jQuery .css 함수를 사용하여 (특히 불투명도를 위해).

DEMO

Answer 2

이 둘 사이의 차이가있는 것입니다 "visible"속성을 사용하여 숨겨지면 실제로 표시되지 않는 요소가 페이지에 남습니다. 따라서 페이지가 나머지 디스플레이를 렌더링 할 때 간격이 고려됩니다.

다른 방법을 사용하면 실제로 요소가 페이지에 배치되는 것을 멈추게되어 페이지의 다른 요소가 배치되는 방식을 변경할 수 있습니다.

일반적으로 보이는 부분을 테스트하는 것이 내 경험으로는 충분하지만, 더 완벽 해지고 싶다면 여러 속성에서 "& &"조건을 사용하여 확인해야합니다. 정말 모든 것은 사용중인 코드가 얼마나 깨끗한 지, 시스템의 나머지 UI 측면이 얼마나 잘 테스트되었는지에 달려 있습니다.

고려해야 할 다른 사항은 테스트의 목적입니다. 작성한 코드를 테스트하고 있습니까? 아니면 브라우저가 페이지를 렌더링하는 데 Javascript를 사용하고 있습니까? 만들고있는 코드를 테스트하고 브라우저가 작동한다는 사실에 의존하고 싶습니다 (브라우저가 작동을 멈 추면 어쨌든 모든 것이 신뢰할 수 없기 때문입니다). 따라서 코드에서 요소에 일부 특성을 설정하도록 지시하면 해당 특성을 검사하면 필요한 모든 테스트가 수행됩니다. 그 위에 무엇이든 실제로 코드 자체의 외부에서 테스트함으로써 (페이지와 다른 것들을 보는 것처럼 수동으로) 입증 될 수 있습니다. 당신이 요소가 DOM에 존재하는지 확인하려면

Answer 3

당신은이 작업을 수행 할 수 있습니다 :

이

$.fn.exists = function() { 
    return this.length > 0; 
} 

는 사용법 :

이

$('#myid').exists();