HTML : 요소가 다른 요소 뒤에 있는지 확인하는 방법이 있습니까?

검색 팝업 창이있는 응용 프로그램이 있습니다. 용어를 검색하면 단어를 페이지에서 찾은 다음 해당 단어를 강조 표시하는 단어에 수업을 추가합니다. 때때로 발견 된 인스턴스가 검색 팝업 뒤에있는 페이지 영역에 있습니다. 그렇다면 검색 팝업의 불투명도를 낮추고 사용자가 그 뒤에있는 인스턴스를 볼 수 있도록하십시오. 이 작업을 수행하는 간단한 방법이 있습니까? 모든 팁이나 트릭을 주시면 감사하겠습니다. 한 가지 요구 사항은 검색 팝업 창이 검색 후에도 열려 있기 때문에 그냥 닫거나 숨길 수는 없다는 것입니다.HTML : 요소가 다른 요소 뒤에 있는지 확인하는 방법이 있습니까?

출처

2011-10-04 Hcabnettek

마크 업을 제공 할 수 있습니까? – f0x

JQuery를 사용하고 있습니까? 결과 컨텐트 영역에서 스크롤 할 수 있습니까? 스크롤 가능한 경우 사용자는 스크롤하여 모든 결과를 볼 수 있습니다. 그리고 더 중요한 것은 : yopur 검색 상자의 위치가 고정되었거나 절대적입니까? –

발견 된 텍스트와 팝업에 getBoundingClientRect()을 사용하고 크기를 비교할 수 있습니다.

MSDN
MDNrange, element

당신은 텍스트에 역할을 할 수

직접 범위,하지만 당신은 하이라이트를 적용하기 위해 찾은 텍스트를 감싸는 요소를 가지고있는 것처럼 소리가 난다, 그래서 난 그냥 사용하는 것 그 요소. 나는 그들이 겹치는 경우 그냥 테스트하기 위해 찾은 텍스트와이 함수로 팝업을 통과 할 수 있다고 생각 :

function isOverlapping (a, b) 
{ 
    var rectA = a.getBoundingClientRect(); 
    var rectB = b.getBoundingClientRect(); 
    return rectA.top < rectB.bottom && rectA.bottom > rectB.top && 
     rectA.left < rectB.right && rectA.right > rectB.left; 
}

편집 : 여기에 재미 좀 데모 때문에 내가, 내 손에 너무 많은 시간이 있어야합니다 : http://jsfiddle.net/gilly3/qUFLJ/4/

출처

2011-10-04 20:48:06 gilly3

멋진 인물, 나쁘다는 것을 알고 있지만 라이브 애플리케이션에서 구현할 수있는 상황을 찾으러 가려워합니다. – sg3s

예, JavaScript를 사용하면 쉽습니다. 팝업이 열려 있는지 알기 때문에 너비와 위치를 알고 있다고 가정합니다. 경계 상자를 만들고 요소가이 상자 안에 있는지 확인하십시오. getBoundingClientRect이 유용합니다. jQuery를 사용하고 있다면. offset도 도움이됩니다.

예가 필요한 경우 알려 주시기 바랍니다.

출처

2011-10-04 20:50:31 alexn

HTML : 요소가 다른 요소 뒤에 있는지 확인하는 방법이 있습니까?

답변

관련 문제