다양한 브라우저와 호환되는 손글씨 자바스크립트 getStyle 함수(요소의 스타일 가져오기)_javascript 기술

HTML 요소의 계산된 스타일을 가져오는 데는 항상 많은 호환성 문제가 있었습니다. 각 브라우저에는 약간의 차이가 있습니다. Firefox와 웹킷(Chrome, Safari)은 W3C 표준 방법인 getComputeStyle()을 지원하지만 IE6/7/ 8은 표준 방법을 지원하지 않지만 이를 구현하기 위한 개인 속성이 있습니다. currentStyle은 IE9와 Opera 모두 이를 지원합니다. 이 두 가지 방법과 속성을 사용하면 기본적으로 대부분의 요구 사항을 충족할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var getStyle = function( elem, type ) {
창에서 'getCompulatedStyle'을 반환 ? getComputeStyle(elem, null)[type] : elem.currentStyle[type];
};

그러나 적응형 너비와 높이의 경우 currentStyle을 사용하여 계산된 값을 얻을 수 없습니다. auto만 반환할 수 있으며, getCompulatedStyle()은 계산된 값을 반환할 수 있습니다. 이 문제를 해결하는 방법은 여러 가지가 있습니다. 이전에 생각한 것은 clientWidth/clientHeight에서 패딩 값을 빼면 표준 방식을 지원하지 않는 브라우저에서도 계산된 너비와 높이를 얻을 수 있다는 것이었습니다. 며칠 전 Situ Zhengmei가 getBoundingClientRect() 메서드를 사용하여 페이지의 요소 위치를 가져온 다음 왼쪽에서 오른쪽을 빼면 너비가 되고 아래쪽에서 위쪽을 뺀 높이가 다른 방법을 사용하는 것을 보았습니다. 그의 코드를 약간 수정했는데 최종 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var getStyle = function( elem, style ) {
창에서 'getCompulatedStyle'을 반환 ?
getCompulatedStyle( elem, null )[style] :
function(){
style = style.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});

var val = elem.currentStyle[스타일];

if( val === 'auto' && (style === "너비" || 스타일 === "높이") ){
var ect = elem.getBoundingClientRect();
if( 스타일 === "너비" ){
return ret.right - ret.left 'px';
}else{
return ret.bottom - ret.top 'px';
}
}
return val;
}();
};

// 이 메서드 호출
var test = document.getElementById( 'test' ),
// 계산된 너비 가져오기
tWidth = getStyle( test, 'width' );

새로운 질문입니다. 요소의 너비 또는 높이가 em 또는 % 단위를 사용하는 경우 getCompulatedStyle()에서 반환된 값은 자동으로 em 또는 %를 px 단위로 변경하지만 currentStyle은 그렇지 않습니다. 글꼴 크기인 경우 em을 단위로 하고 Opera에서는 0em을 반환합니다. Opera는 정말 무섭습니다!

나중에 사용 중에 예상치 못한 호환성 문제를 발견했습니다. 오늘은 원본 코드를 최적화하고 몇 가지 일반적인 호환성 문제를 다루었습니다.

JavaScript에서 "-"(대시 또는 하이픈)은 빼기 기호를 나타내며 CSS에서는 padding-left, 글꼴 크기 등과 같은 많은 스타일 속성에 이 기호가 있으므로 다음과 같은 경우 코드가 javascript에 나타나면 오류입니다.

코드를 복사하세요. 코드는 다음과 같습니다.

elem .style .margin-left = "20px";

올바른 표기는 다음과 같습니다:

코드 복사 코드는 다음과 같습니다:

elem.style.marginLeft = "20px";

여기서 CSS에서 밑줄을 제거하고 밑줄 바로 뒤의 문자(일반적으로 "camel"이라고 함)를 대문자로 시작해야 합니다. Case" JavaScript를 사용하여 요소의 CSS 스타일을 설정하거나 가져오는 작성 방법은 Camel Case로 작성되어야 합니다. 그러나 CSS에는 익숙하지만 javascript에는 익숙하지 않은 많은 초보 친구들은 항상 이러한 낮은 수준의 실수를 저지르게 됩니다. 교체의 고급 사용법을 사용하면 CSS 속성의 밑줄을 카멜 케이스 작성으로 쉽게 바꿀 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var newProp = prop.replace( /-(w) /g, 함수( $, $1 ){
return $1.toUpperCase();
});

float의 경우 JavaScript에서 예약어입니다. JavaScript에서 요소의 float 값을 설정하거나 가져오는 다른 방법이 있습니다. 표준 브라우저에서는 cssFloat이고 IE6/7/8에서는 다음과 같습니다. 스타일플로트.

상단, 오른쪽, 하단 및 왼쪽에 명시적인 값이 없으면 일부 브라우저는 이러한 값을 얻을 때 자동을 반환합니다. 자동 값은 합법적인 CSS 속성 값이지만 결코 우리가 원하는 것은 아닙니다. 결과는 0px이어야 합니다.

IE6/7/8에서 요소의 투명도를 설정하려면 filter:alpha(opacity=60)와 같은 필터를 사용해야 합니다. 표준 브라우저의 경우 IE9에서는 두 가지 쓰기 방법을 모두 직접 지원합니다. 요소의 투명도를 얻기 위한 호환성도 구현되었습니다. 불투명도를 사용하는 한 모든 브라우저 요소의 투명도 값을 얻을 수 있습니다.

IE6/7/8에서 요소의 너비와 높이를 구하는 방법은 이전 글에서 소개했으므로 여기서는 반복하지 않겠습니다. 또 한 가지 주목할 점은 요소의 스타일이 스타일 인라인을 사용하여 작성되었거나 JavaScript를 사용하여 스타일 속성이 설정된 경우 다음 방법을 사용하여 요소의 계산된 스타일을 가져올 수 있다는 것입니다.

코드 복사 코드는 다음과 같습니다.

var height = elem.style.height;

이 방법은 getCompulatedStyle 또는 currentStyle에서 속성 값을 읽는 것보다 빠르며 먼저 사용해야 합니다. 물론 전제 조건은 인라인 작성으로 스타일을 설정하는 것입니다(자바스크립트를 사용하여 인라인 스타일을 설정하는 것도 설정됩니다). 최적화된 최종 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var getStyle = function( elem, p ) {
var rPos = /^(left|right|top|bottom)$/,
ecma = "getCompulatedStyle" in window,
// 밑줄을 카멜 표기법으로 변환합니다. 예: padding-left = > paddingLeft
p = p.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});
// float 처리
p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

return !!elem.style[p] ? p] :
ecma ?
function(){
var val = getCompulatedStyle( elem, null )[p];
// 위쪽, 오른쪽, 아래쪽 및 왼쪽이 자동인 경우를 처리합니다
if( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}() :
함수( ) {
var wirelesscasinogames.com val = elem.currentStyle[p];
// IE6/7에서 요소 가져오기/ 8
if( (p === "width" || p === "height") && val === "auto" ){
var ect = elem.getBoundingClientRect()의 너비와 높이 ;
return ( p === "width" ? ret.right - ret.left : ret.bottom - ret.top ) "px";
}
// IE6/7에서 요소 가져오기/ 8
의 투명성 if( p === "opacity" ){
var filter = 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( val === undefine ){
return "1";
}
}
// 위쪽, 오른쪽, 아래쪽, 왼쪽이 자동인 경우 처리
if ( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}();
};

다음은 호출 예시입니다.

코드 복사 코드는 다음과 같습니다.

<script><P>var box = document.getElementById( "box" );<BR> alert( getStyle(box, "width") ); // "500px"<P>alert( getStyle(box, "ground-color") ) // "rgb(0, 0, 0)" / "#000"<BR>alert( getStyle(box, "opacity") ); // "0.6"<BR>alert( getStyle(box, "float") ) // "없음"<BR></ 스크립트><BR><BR></script>