jquery : 요소에 특정 CSS 클래스 / 스타일이 있는지 확인하는 방법

86

div가 있습니다.

<div class="test" id="someElement" style="position: absolute"></div>

특정 요소가 있는지 확인하는 방법이 있습니까?

$("#someElement")

특정 클래스가 있습니다 (제 경우에는 "테스트").

또는 en 요소에 특정 스타일이 있는지 확인하는 방법이 있습니까? 이 예에서는 요소에 " position: absolute" 가 있는지 알고 싶습니다 .

대단히 감사합니다!

javascript jquery css

— 0100110010101
소스

14

질문인지 답이 틀렸는 지 확실하지 않지만 질문에 style = "test"가 있고 답변은 class = "test"를 찾습니다.

— wheresrhys

1

제 생각에는 그가 틀린 답을 옳은 것으로 표시했기 때문에 질문이 틀 렸습니다. 하지만 투표 결과를 보면 대부분의 사람들이이 잘못된 질문에 대한 정답을 찾기 위해 우연히 발견 한 것 같습니다. 어, 그게 말이된다면 ... DrJokepu의 대답입니다. 그것이 내가 적어도 여기있는 이유입니다.

— BrainSlugs83

58

if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}

— 다린 디미트로프
소스

75

이것은 질문에 대한 답변이 아닙니다. 아래 DrJokepu의 답변을 참조하십시오.

— Ryan Burney 2011 년

281

CSS 스타일은 단순히 "태그"가 아니라 키-값 쌍입니다. 기본적으로 각 요소에는 할당 된 전체 CSS 스타일 세트가 있으며, 대부분은 암시 적으로 브라우저 기본값을 사용하며 일부는 CSS 스타일 시트에서 명시 적으로 재정의됩니다.

요소의 특정 CSS 항목에 할당 된 값을 가져 와서 비교하려면 :

if ($('#yourElement').css('position') == 'absolute')
{
   // true
}

스타일을 재정의하지 않은 경우 해당 특정 요소에 대한 브라우저 기본값이 표시됩니다.

— Tamas Czinege
소스

3

선택기로 할 방법이 없나요?

— BrainSlugs83

이것으로 실제 속성이 무엇인지 알 수 있습니다. 내가 알아야 할 것은이 속성이 직접 설정되는지 아니면 CSS 스타일 / 브라우저에서 상속되는지입니다 ... 가능합니까?

— ante.sabo 2012 년

페이지로드 후 개체의 DOM 변경 / css 값이 변경되는 경우 시나리오에서 작동하지 않는 것 같습니다. DOM이로드 된 후 CSS 변경을 보는 방법에 대한 아이디어가 있습니까?

— Collarbone

@Collarbone 문서가로드되면 항상 setTimeout () 및 clearTimeout ()을 사용하여 호출을 1 초 정도 지연 할 수 있습니다.

— probie

13

if ($("element class or id name").css("property") == "value") {
    your code....
}

— 산딥 굽타
소스

4

또는 해당 속성이 있고 ID를 사용하지 않는 요소에 액세스해야하는 경우 다음 경로로 이동할 수 있습니다.

$("img").each(function () {
        if ($(this).css("float") == "left") { $(this).addClass("left"); }
        if ($(this).css("float") == "right") { $(this).addClass("right"); }
    })

— Kelseedev
소스

1

한 가지 해결책을 찾았습니다.

$("#someElement")[0].className.match("test")

하지만 어떻게 든 더 나은 방법이 있다고 믿습니다!

— 0100110010101
소스

1

질문은 두 가지 다른 것을 요구합니다.

요소에는 특정 클래스가 있습니다.
요소에는 특정 스타일이 있습니다.

두 번째 질문은 이미 답변되었습니다. 첫 번째는 다음과 같이 할 것입니다.

if($("#someElement").is(".test")){
    // Has class test assigned, eventually combined with other classes
}
else{
    // Does not have it
}

— 마리오 바스케스
소스