파이어 폭스와 IE 11의 jquery css 함수의 이상한 동작

Question

정말 간단하게하려고했는데 코드를 디버깅하기 시작했을 때, 내가 그것을 보았을 때까지 무엇이 잘못되었는지 알지 못했습니다. 이 간단한 기능은 Firefox 나 IE 11에서는 작동하지 않지만 Chrome에서는 작동한다고 믿을 수 없습니다.

2 개의 CSS 클래스가있는 div 요소가 있다고 상상해보십시오.

<div id="box" class="class1 class2"></div> 

여기서 class2는 border-top 속성을 갖습니다.

.class2 { 
    border-top: 1px solid #626262; 
} 

이제이 상자 div에 border-top 속성이 있는지 확인하고 싶습니다.

당신이 생각하는 우선입니다 :

$("#box").css("border-top") 

오른쪽? border-top 속성을 반환합니다 (있는 경우). 이것은 Chrome에서 작동하며 border-top 속성을 반환합니다 ... Firefox에서 IE 11은 빈 문자열을 반환합니다. 어떻게 가능합니까?

무엇이 잘못 될지 알고 싶습니다. 또는 다른 모든 방법으로 모든 브라우저에서 가져올 수 있습니까?

미리 감사드립니다.

EDITED : 나에게 효과가있는 뭔가 다른 일을 끝 냈지만 아무런 관련이 없습니다. 방금 테두리의 너비에주의를 기울 였고 너비가 0px가 아닌 값을 적용합니다. "0px none # 000000"으로 아무런 이유없이 다른 기본 테두리 스타일을 사용했기 때문에 더욱 의미가 있습니다.

Answer 1

:

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $(elem).css("borderTopWidth"), $(elem).css("borderBottomWidth"), and so on.

css() method

그래서 기본적으로 각 브라우저가 원래의 접근 방식을 사용하여 여러 속성에 사용하는 것을 찾아해야합니다 .... 아니면 A. 울프가 제안 할 그냥 대신 클래스를 확인할 수 있습니다.

Answer 2

좀 더 원자 적 CSS 속성 (예 : "border-top"대신 0이 아닌 "border-top-width")을 찾으려고 했습니까?

Answer 3

당신은 border-top-width 같은 단일 값 속성의 계산 된 값을 얻을 수 있어야하지만 border-top 같은 다중 값 속성에 대한 jQuery로 모두 브라우저와의 차이뿐만 아니라 DOM의 API가 있습니다 :

가 CSS에 대한 jQuery를 워드 프로세서에 따르면

for (var properties = ['border-top', 'border-top-width'], i = 0, l = properties.length; i < l; i++) { 
 
    console.log(properties[i] + ': ' + $('#box').css(properties[i])); 
 
    console.log(properties[i] + ': ' + window.getComputedStyle(document.getElementById('box')).getPropertyValue(properties[i])); 
 
    }

.class2 { 
 
    border-top: 1px solid #626262; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" class="class1 class2">This is a test.</div>