요소의 정확한 스타일 정보 검사

Question

Javascript를 사용하여 특정 요소에 아래쪽 테두리가 있는지 여부를 알 수있는 상황이 발생했습니다.

이 요소는 getComputedStyle을 사용하고 결과 스타일 시트 개체에서 "borderBottom"을 찾는 것만 큼 쉽다.

브라우저 간 호환성에 신경 쓰면 조금 더 복잡해 보입니다. 나는 IE6, 7 또는 심지어는 (심지어는 getComputedStyle을 가지지 않는) 8과 같은 고대의 것들을 지원하는 것에 대해 이야기하는 것이 아니다. - 나는 비교적 브라우저를 지원하는 것에 대해 이야기하고있다.

그리고 다른 브라우저는 이와 관련하여 다른 일을하는 것처럼 보입니다.

는 이제 아주 간단한 스타일 시트를 보자 :

.foo, 
.bar { 
    border: 3px solid black; 
} 

.foo { 
    border-top: 0; 
} 

은 가정하자 내가 여기 계산 된 "border-bottom"값을 얻을합니다. 실제 border-bottom 속성이 설정되어 있지는 않지만 border 속성을 통해 계산됩니다. 나는 몇 가지 요소에 getComputedStyle를 호출하는 경우

그래서, 크롬 37 버전 (안 최신 버전하지만 꽤 "현대")에, 클래스 bar를 사용하는 내가 얻을 : 예상대로 3px solid rgb(0, 0, 0).

그러나 Firefox (버전 28 - 다시 최신 버전이 아니라 여전히 "현대")에서 나는 "borderBottom" 스타일의 빈 문자열을 얻습니다.

var style = getComputedStyle(document.getElementById("example")); 
for (var key in style) console.log("STYLE: " + key + " " + style[key]); 

브라우저 출력 계산 된 스타일의 거대한 목록 모두를 :

그래서, 계산 된 스타일 시트를 반복하고 크롬과 파이어 폭스가 실제로 생산하는 것을 볼 수있는 작은 스크립트를 썼습니다. Chrome을 사용하면 다음과 같이 나타납니다.

STYLE: borderBottom 3px solid rgb(0, 0, 0) 

하지만 Mozilla는 이와 같은 기능을 제공하지 않습니다. 그것은 네이티브 코드 내부 기능과 함께 스타일 규칙의 혼합을 제공 좋아 : 나는 공공 jsfiddle에 두 브라우저의 출력을 덤프

"STYLE: item function item() { 
    [native code] 
}" 

(실행하는 것을 의미하지, 그것은 내가 거기에 덤프 단지 일반 텍스트 출력의) : The output for Chrome

당신이 볼 수 있듯이

The output for Firefox

, 그들은 꽤 다르다. 나는이 목록을 생성하는 데 사용되는 실제 코드를 보여

And here's a fiddle : (. 출력이 대부분의 브라우저 개발자 콘솔을 볼 수있는 F12 버튼을 누르면에, 브라우저의 콘솔에 표시되어 있습니다)

을

이렇게,이를 위해 몇 가지 알려진 크로스 브라우저 전략이 있습니까?모든 현대의 브라우저에서 작동하는 방식으로 특정 속성 (예 : borderBottom)에 대해 계산 된 스타일을 찾는 방법은 무엇입니까? 이것은 심지어 W3C가 표준화 한 것입니까?

아니면 라이브러리가 없으면 시도하기에는 너무 복잡합니다.

Answer 1

아마도 border은 border-width, border-style, border-color의 속기 속성입니다. 그리고 border-width는 border 세트 border-bottom-* 특성,하지만 border-bottom 설정 border-*-width의 속기 등 그런

이다. 따라서 Firefox에서 빈 문자열을 얻습니다.

그러나, 다음 작동합니다 :

getComputedStyle(element).borderBottomWidth