JavaScript로 요소 CSS 표시 확인

97

요소의 CSS display == block또는 noneJavaScript 사용 여부를 확인할 수 있습니까?

javascript css

— 세스
소스

114

sdleihssirhc가 아래에 말했듯이 요소 display가 상속되거나 CSS 규칙에 의해 지정되는 경우 계산 된 스타일을 가져와야 합니다 .

return window.getComputedStyle(element, null).display;

요소에는 style스타일이 인라인으로 선언되었거나 JavaScript로 선언 된 경우 원하는 것을 알려주 는 속성이 있습니다.

console.log(document.getElementById('someIDThatExists').style.display);

문자열 값을 제공합니다.

— 댄 데이비스 브라켓
소스

2

인라인 CSS가 없으면 어떻게됩니까?

— jscripter

5

단순성을 위해 항상 계산 된 스타일을 얻지 않는 이유는 무엇입니까?

— cade galt 2015

12

무엇 currentStyle입니까? 들어 본 적도없고, 확인한 결과 document.body.currentStyle아무것도 얻지 못했습니다 (놀라지 않았습니다)

— vsync

1

@vsync (및 향후 참조 용) MDN에 따르면 이전 버전의 Internet Explorer의 독점 속성입니다.

— user202729

2

의견 주셔서 감사합니다. 최신 웹에 대한 답변이 업데이트되었습니다.

— Dan Davies Brackett

78

스타일이 인라인 또는 JavaScript로 선언 된 경우 style개체 에서 얻을 수 있습니다 .

return element.style.display === 'block';

그렇지 않으면 계산 된 스타일을 가져와야하며 브라우저 불일치가 있습니다. IE는 간단한 currentStyle개체를 사용하지만 다른 모든 사람은 다음과 같은 방법을 사용합니다.

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

는 null파이어 폭스 버전 3 이하에 필요했습니다.

— Sdleihssirhc
소스

이 경우 ==이 아니어야합니까?

— Kai Qing

@Kai 트리플 이퀄은 타입 강제를하지 않습니다. Crockford는 " ===및 !==연산자 "라는 섹션에서 이유를 설명합니다 .

— sdleihssirhc

꽤 흥미 롭습니다. 이와 같은 것이 수년 간의 프로그래밍 끝에 주목을 벗어날 수 있다는 사실이 재밌습니다. 나는 항상 ===가 엄격한 부울이라는 제안을 채택했습니다. 알아 둘만 한.

— Kai Qing

3

@Kai : 여기 ===보다 사용 하는 데 문제가 ==없지만 똑같이 이점도 없습니다. 두 피연산자 모두 문자열이 보장되므로 두 연산자 모두 정확히 동일한 단계를 수행합니다.

— Tim Down

1

@hippietrail 그리고 거의 10 년이 지난 후에도 (2019-10-27) 여전히 문제가 있습니다. MDN 보고서

— Felipe Alameda A

37

jQuery의 경우 이와 같은 의미입니까?

$('#object').css('display');

다음과 같이 확인할 수 있습니다.

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

— 카이 칭
소스

9

대답을 지나치게 복잡하게 만들지 마십시오. jQuery가 어느 정도 표준이되고 있다는 것을 알고 있지만 요소의 표시 스타일을 확인하기 위해 전체 프레임 워크를 추가 할 이유가 없습니다.

— zzzzBov

14

네,하지만 다른 모든 사람들이 원시 자바 스크립트 답변을 주었기 때문에이 작업을 수행했습니다. 그래서 그가 jquery를 사용하고 있지만 지정하지 않았다면 게시물에 약간의 사용이있을 것입니다

— Kai Qing

18

이 대답은 정확히 원하는 것은 아니지만 경우에 따라 유용 할 수 있습니다. 요소가 표시 될 때 일부 치수가 있음을 알고있는 경우 다음을 사용할 수도 있습니다.

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

편집 : 이것이 CSS display속성을 직접 확인하는 것보다 나은 이유는 무엇 입니까? 모든 부모 요소를 확인할 필요가 없기 때문입니다. 일부 부모 요소에가 있으면 display: none자식도 숨겨 지지만 여전히 있습니다 element.style.display !== 'none'.

— Martin Jiřička
소스

실제로 이것은 유용합니다.

— Jonatas Walker 2017

7

예.

var displayValue = document.getElementById('yourid').style.display;

— 승리자
소스

5

기본 JavaScript :

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

— Chugworth
소스

2

일반 자바 스크립트로 표시되는지 확인하려면 표시 속성이 'none'인지 확인하세요 ( 'block'을 확인하지 마세요. 비어 있거나 'inline'일 수도 있으며 여전히 표시 될 수 있음).

var isVisible = (elt.style.display != "none");

jQuery를 사용하는 경우 대신 다음을 사용할 수 있습니다.

var isVisible = $elt.is(":visible");

— MarkXA
소스

0

순수 자바 스크립트로 style.display속성을 확인할 수 있습니다 . jQuery를 사용하면$('#id').css('display')

— 조이스 바부
소스

-1

예를 들어 jQuery로 확인할 수 있습니다.

$("#elementID").css('display');

이 요소의 표시 속성에 대한 정보가 포함 된 문자열을 반환합니다.

— 마렉 투찰 스키
소스