js_javascript 스킬에서 요소 스타일을 올바르게 가져오는 방법에 대한 자세한 설명

요소 스타일을 가져오는 js에 대해 이야기하기 전에 스타일에 대해 간단히 이야기하겠습니다

세 가지 스타일이 있습니다
외부 스타일 외부 스타일 시트
CSS 확장자가 있는 파일(또는 ("하이퍼텍스트 스타일 시트" 파일), 해당 범위는 여러 웹 페이지, 전체 웹 사이트 또는 심지어 다른 웹 사이트일 수 있습니다. 웹페이지에 링크된 후에만 적용 가능합니다.
임베디드 스타일 내부 스타일 시트
웹 페이지 내부의 스타일 설정을 포함하며, 해당 범위는 임베디드 웹 페이지로 제한됩니다.
인라인 스타일
HTML 문서에서 인라인 스타일 시트의 서식 정보는 적용된 웹 페이지 요소의 HTML 태그 매개변수 속성으로 직접 삽입됩니다. 엄밀히 말하면 인라인 스타일 시트는 테이블이 아니며 단지 HTML 태그일 뿐입니다.
동일한 스타일이 나타날 경우 내장 스타일보다 인라인이 우선이고, 외부 스타일보다 내장 스타일이 우선순위가 높습니다.
---------------------------------- --- ---
js가 이 세 가지 스타일을 얻을 때 style은 인라인 스타일만 얻을 수 있고 외부 스타일과 내장 스타일은 얻을 수 없으므로 currentStyle을 사용해야 합니다. 속성이며 currentStyle은 FF에서 지원되지 않습니다
다음은 FF 및 IE와 호환되고 스타일을 올바르게 가져오는 두 가지 방법을 소개합니다

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

var $=function(id){return document.getElementById(id) }
방법 1
/*
* @string id
* @string styleName 스타일 이름
*/
function getEyeJsStyle(id,styleName){
if($(id).currentStyle){//ie
return $ (id).currentStyle[ styleName];
}else{ //ff
var $arr=$(id).ownerDocument.defaultView.getCompulatedStyle($(id), null)
return $arr [styleName];
}
}

방법 2:

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

HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getCompulatedStyle(this, null);
});

getComputeStyle 함수 사용법에 대해 알려주세요
이 함수에는 두 개의 매개변수가 있습니다.
첫 번째 매개변수는 스타일을 가져와야 하는 요소 개체입니다. 두 번째 매개변수는:hover, :first -letter, :before 등과 같은 의사 요소입니다.
의사 요소가 필요하지 않은 경우 이 매개변수는 null입니다.
getCompulatedStyle() 함수는 document.defaultView 객체에서 액세스할 수 있습니다. 즉, 함수는 다음과 같이 호출할 수 있습니다.
------ ----- ------------------- ----- ------------------

그런데, 홈 페이지의 런타임스타일 속성은 IE에서만 지원되고, 홈 페이지에서는 이 속성이 지원되지 않습니다. FF
runtimeStyle에서 런타임 스타일로 지원됩니다! 스타일 속성과 중복되면 스타일 속성을 덮어쓰게 됩니다!
runtimeStyle을 지정하면 현재 표시되는 스타일이 RuntimeStyle을 기반으로 한다는 뜻입니다. RuntimeStyle이 취소되면 현재 표시되는 스타일이 currentStyle 스타일로 복원됩니다.
사례:
document.getElementById("eyejs").runtimeStyle.width="400px"를 설정하면 요소의 너비는 400px이며 이는 스타일 속성을 재정의합니다.

사례 분석 패키지 다운로드