JS getStyle은 최종 스타일 함수 code_javascript 기술을 가져옵니다.

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

#flower {
너비:100px ;
font-size:12px;
float:left;
opacity:0.5;
filter:alpha(opacity=50);

id= "flower" div 요소를 사용하고 위 스타일을 설정하는 경우, 우리의 목표는 자바스크립트

...

를 통해 스타일의 최종 속성을 얻는 것입니다. >
getStyle 함수:
여기서 세 가지 프로토타입 확장이 사용됩니다. String.prototype.capitalize 이 메소드는 문자열의 첫 글자를 대문자로 만듭니다.
Array.prototype.contains는 지정된 항목이 있는지 여부를 결정합니다. 배열의 멤버
String.prototype.camelize 이는 "font-size" 문자열을 "fontSize"로 변환하는 것입니다. 이 형식은 스타일을 얻는 데 사용됩니다

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

String.prototype.capitalize=function(){

return this.charAt(0).toUpperCase( ) this.substring(1).toLowerCase() ;
}
Array.prototype.contains=function(A){
return (this.indexOf(A) >= 0); }
String.prototype.camelize=function (){
return this.replace(/-(w)/ig,
function(B, A) {
return A.toUpperCase();
})
}
var css={
getStyle:function(elem,styles){
var value,
elem=document.getElementById(elem); if(styles == "float"){
document.defaultView ? styles = 'float' /*cssFloat*/ : styles='styleFloat'
}
value=elem.style[styles] | | elem.style[styles.camelize()] ;
if(!value){
if (document.defaultView && document.defaultView.getCompulatedStyle) {
var _css=document.defaultView.getCompulatedStyle(elem , null);
value= _css ? _css.getPropertyValue(styles) : null
}else{
if (elem.currentStyle){
value = elem.currentStyle[styles.camelize() ];
}
}
}
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none "){
value=elem[" offset" styles.capitalize()] "px";
}
if(styles == "opacity"){
try {
value = elem.filters['DXImageTransform.Microsoft.Alpha' ].opacity;
value =value/100;
}catch(e) {
try {
value = elem.filters('alpha' ).opacity;
} catch(err ){}
}
}
return value=="auto" ? null :value; getStyle("flower","width"); //100px;
css.getStyle("flower","font-size");//12px
css.getStyle("flower","float) ");//left
css.getStyle("flower","opacity");//0.5



기본 사항을 먼저 검토해 보겠습니다

style Standard 스타일! style 속성으로 지정할 수 있습니다!
runtimeStyle 런타임 스타일! 스타일 속성과 중복되면 스타일 속성을 덮어쓰게 됩니다!
currentStyle은 스타일과 런타임 스타일의 조합을 의미합니다!

스타일 인라인 스타일
currentStyle은 전역 스타일 시트, 인라인 스타일 및 HTML 태그 속성에 지정된 개체 형식 및 스타일을 나타냅니다. runtimeStyle은 전역 스타일 시트, 인라인 스타일 및 HTML 태그를 나타냅니다. 속성으로 지정된 형식 및 스타일 위의 개체(currentStyle 및 RuntimeStyle은 FF에서 사용할 수 없음)
getStyle(요소 ID, get 속성)
요소 스타일 태그에서 스타일 가져오기
elem .style[styles] || elem.style[styles.camelize()]
"font-size" 전달을 지원합니다.
그러나 이는 최종 스타일이 아닙니다.
최종 스타일을 얻는 방법에는 두 가지가 있습니다. 스타일 최종 해결책은
document.defaultView.getCompulatedStyle //w3c 메소드
이고 다른 하나는 elem.currentStyle["..."] //ie 메소드
currentStyle 메소드를 통해 "- "를 가져와야 합니다. 문자 속성은 String.prototype.camelize




코드 복사


를 통해 IE에서 인식할 수 있는 속성으로 변환해야 합니다.

if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ value=elem [" offset" styles.capitalize()] "px"; }

CSS에 정의된 요소의 너비가 자동인 경우 요소의 최종 너비를 얻을 수 없습니다. offsetWidth 및 offsetHeight를 사용하여 실제 값을 얻을 수 있습니다

물론 요소가 "표시"된다는 전제가 있습니다.

코드를 복사하세요


코드는 다음과 같습니다.

try { value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity value =value/100; }catch(e) { try {

value = elem.filters('alpha').opacity;

} catch(err){}
}


투명도를 얻는 방법은 IE의 투명도 정의가 다른 브라우저의 정의와 다르기 때문에 필터를 통해 얻은 불투명도 값은 /100이어야 합니다. 표준 불투명도 값(범위 0-1)을 반환합니다.