JavaScript로 요소 CSS 표시 확인

JavaScript로 요소 CSS 표시 확인

---

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

---

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

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

문자열 값을 제공합니다.

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

return getComputedStyle(element, null).display;

---

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

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

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

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

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

---

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

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

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

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

---

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

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

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

---

예.

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

---

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

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

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

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

---

기본 JavaScript :

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

---

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

---

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

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

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

참고 URL : https://stackoverflow.com/questions/4866229/check-element-css-display-with-javascript