HTML 요소의 계산 스타일을 얻으려면 항상 많은 호환성 문제가 있으며 브라우저 간에는 차이가 있습니다. Firefox 및 WebKit (Chrome, Safari)은 W3C 표준 방법 : getComputedStyle ()을 지원하는 반면 IE6/7/8은 표준 방법을 지원하지 않지만 현재 스타일, IE9 및 Opera Support를 구현할 개인 속성이 있습니다. 이 두 가지 방법과 속성을 통해 대부분의 요구 사항은 기본적으로 충족 될 수 있습니다.
코드 사본은 다음과 같습니다.
var getStyle = function (elem, type) {
창에서 'getComputedStyle'을 반환 하시겠습니까? getComputedStyle (Elem, NULL) [유형] : Elem.CurrentStyle [유형];
};
그러나 적응 폭과 높이에 CurrentStyle을 사용하면 계산 된 값을 얻을 수 없으므로 자동으로 만 반환 할 수 있으며 GetComputedStyle ()은 계산 된 값을 반환 할 수 있습니다. 이 문제를 해결하는 방법에는 여러 가지가 있습니다. 이전에 생각한 것은 표준 방법을 지원하지 않는 브라우저에서 계산 된 너비와 높이를 얻을 수 있도록 ClientWidth/ClientHeight를 사용하여 패딩 값을 빼는 것이 었습니다. 며칠 전, Situ Zhengmei가 GetBoundingClientRect () 메소드를 사용하여 페이지에서 요소의 위치를 얻은 다음 왼쪽의 오른쪽 빼기, 하단 빼기 상단은 높이입니다. 나는 그의 코드를 약간 변경했으며 최종 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var getstyle = function (elem, style) {
창에서 'getComputedStyle'을 반환 하시겠습니까?
GetComputedStyle (Elem, Null) [스타일] :
기능(){
style = style.replace (//- (/w)/g, 함수 ($, $ 1) {
return $ 1.toupperCase ();
});
var val = elem.currentStyle [스타일];
if (val === 'auto'&& (style === "width"|| style === "높이")) {
var rect = elem.getBoundingClientRect ();
if (style === "width") {
return rect.right -rect.left + 'px';
}또 다른{
return rect.bottom -rect.top + 'px';
}
}
반환 val;
} ();
};
//이 메소드를 호출하십시오
var test = document.getElementById ( 'test'),
// 계산 된 너비를 얻습니다
twidth = getstyle (테스트, '폭');
새로운 문제, 요소의 너비 또는 높이가 EM 또는 % 단위를 사용하는 경우 getComputedStyle ()에 의해 반환 된 값은 자동으로 EM 또는 %를 PX 장치로 변경하며 CurrentStyle은 그렇지 않습니다. 글꼴 크기가 EM을 단위로 사용하는 경우 오페라 아래의 반환 된 0EM은 정말 무섭습니다!
나중에, 나는 예상치 못한 호환성 문제를 발견했습니다. 오늘 저는 원래 코드를 최적화하고 몇 가지 일반적인 호환성 문제를 처리했습니다.
JavaScript에서 "-"(Scribing 또는 Hyphen)는 마이너스 부호를 나타내고 CSS에서는 많은 스타일 속성이 패딩 왼쪽, 글꼴 크기 등과 같은이 기호를 가지고 있으므로 다음 코드가 JavaScript로 표시되면 오류가됩니다.
코드 사본은 다음과 같습니다. elem.style.margin-left = "20px";
글을 쓰는 올바른 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다. elem.style.marginleft = "20px";
여기서는 CSS의 중간 점수를 제거하고 원래 "낙타 스타일"쓰기 방법으로 알려진 미드 스코어가 이어진 문자를 대문자로 만들어야합니다. 요소를 설정하거나 얻기 위해 JavaScript를 사용하든 CSS 스타일은 낙타 스타일이어야합니다. 그러나 CSS에 익숙하지만 JavaScript에 익숙하지 않은 많은 초보자는 항상이 낮은 수준의 실수를합니다. 교체의 고급 사용을 사용하면 CSS 속성의 미드 스코어를 낙타 스타일로 대체 할 수 있습니다.
코드 사본은 다음과 같습니다. var newprop = prop.replace (//- (/w)/g, function ($, $ 1) {
return $ 1.toupperCase ();
});
float의 경우 JavaScript로 예약 된 단어입니다. JavaScript에서 요소의 플로트 값을 설정하거나 가져 오는 다른 대안이 있습니다. 표준 브라우저의 CSSFLOAT, IE6/7/8의 스타일 플로트입니다.
상단, 오른쪽, 하단 및 왼쪽에 대한 명시적인 값이없는 경우 일부 브라우저는 이러한 값을 얻을 때 자동으로 반환됩니다. Auto의 값은 법적 CSS 속성 값이지만, 우리가 원하는 결과는 아니지만 0px 여야합니다.
IE6/7/8에서 요소의 투명성을 설정하려면 다음과 같은 필터, 필터 : Alpha (불투명도 = 60), 표준 브라우저의 경우, 불투명도를 직접 설정하고 IE9 쓰기 방법 지원을 모두 설정하여 요소의 투명성을 얻기 위해 호환성 처리를 수행했습니다. 불투명도를 사용하는 한 모든 브라우저 요소의 투명성 값을 얻을 수 있습니다.
IE6/7/8에서 요소의 너비와 높이를 얻는 것이 이전 기사에서 소개되었으므로 여기에서 반복하지 않을 것입니다. 주목해야 할 또 다른 점은 스타일을 사용하여 요소 스타일이 인라인으로 작성되거나 스타일 속성이 JavaScript를 사용하여 설정된 경우 다음 방법을 사용하여 계산 된 요소 스타일을 얻을 수 있다는 것입니다.
코드 사본은 다음과 같습니다.
var height = elem.style.height;
이 방법은 GetComputedStyle 또는 CurrentStyle에서 속성 값을 읽는 것보다 빠르며 먼저 사용해야합니다. 물론 전제 조건은 스타일이 인라인 쓰기를 통해 설정된다는 것입니다 (JavaScript 설정 사용도 인라인 스타일을 설정하고 있음). 최적화 된 최종 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var getstyle = function (elem, p) {
var rpos = /^(왼쪽 | 오른쪽 | 상단 | 하단) $ /,
ecma = "getComputedStyle"창에서,
// 중간 점수를 낙타 패턴으로 변환 : Padding-Left => Paddingleft
p = p.replace (//- (/w)/g, 함수 ($, $ 1) {
return $ 1.toupperCase ();
});
// 프로세스 플로트
p = p === "float"? (ecma? "cssfloat": "stylefloat") : p;
반환 !! elem.style [p]?
Elem.style [P] :
ECMA?
기능(){
var val = getComputedStyle (Elem, Null) [P];
// 상단, 오른쪽, 하단 및 왼쪽이 자동 인 상황을 처리합니다.
if (rpos.test (p) && val === "auto") {
"0px"를 반환합니다.
}
반환 val;
} () :
기능(){
var <a href = "http://wirelesscasinogames.com"> WirelessCasinogames.com </a> val = elem.currentStyle [p];
// IE6/7/8에서 요소의 너비와 높이를 얻습니다.
if ((P === "너비"|| p === "높이") && val === "auto") {
var rect = elem.getBoundingClientRect ();
return (p === "width"? rect.right -rect.left : rect.bottom -rect.top) "px";
}
// IE6/7/8에서 요소의 투명성을 얻습니다
if (p === "불투명도") {
var 필터 = elem.currentStyle.Filter;
if (/opacity/.test(filter)) {
val = filter.match (// d /) [0] / 100;
return (val === 1 || val === 0)? val.tofixed (0) : val.tofixed (1);
}
else if if (val === 정의되지 않은) {
"1"을 반환합니다.
}
}
// 상단, 오른쪽, 하단 및 왼쪽이 자동 인 상황을 처리합니다.
if (rpos.test (p) && val === "auto") {
"0px"를 반환합니다.
}
반환 val;
} ();
};
다음은 호출 예입니다.
코드 사본은 다음과 같습니다.
<스타일>
.상자{
너비 : 500px;
높이 : 200px;
배경 :#000;
필터 : 알파 (불투명도 = 60);
불투명도 : 0.6;
}
</스타일>
<div id = "box"> </div>
<cript>
var box = document.getElementById ( "box");
경고 (getStyle (상자, "폭"); // "500px"
경고 (GetStyle (상자, "배경색"); // "RGB (0, 0, 0)" / "#000"
경고 (GetStyle (상자, "불투명")); // "0.6"
경고 (GetStyle (상자, "float"); // "없음"
</스크립트>