js는 element_javascript 기술 클래스에서 CSS 속성 값 코드를 가져옵니다.

js를 사용하여 div에서 CSS의 여백, 패딩, 높이, 테두리 등을 가져오는 방법. document.getElementById("id").style.margin을 사용하여 직접 얻을 수 있다고 말할 수 있습니다. 하지만 말씀하신 내용은 태그에 직접 작성된 스타일의 속성만 가져올 수 있고 스타일 태그 외부의 속성(예: CSS 파일의 속성)은 가져올 수 없습니다. 두 값 모두 다음 방법으로 얻을 수 있습니다.
렌더링 예시는 다음과 같습니다.

js가 CSS 속성을 얻을 때 태그에 스타일이 없으면 CSS에서 속성을 직접 얻을 수 없으므로 이를 수행하는 방법이 필요합니다.
getStyle(obj,attr) 호출 방법 설명: obj는 객체이고 attr은 속성 이름이며 js의 쓰기 방법과 호환되어야 합니다(참조: JS는 스타일 이름의 쓰기 방법을 제어할 수 있습니다. ).

Js 코드

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

function getStyle(obj ,attr) {
var ie = ! "v1";//단순 판단 ie6~8
if(attr=="BackgroundPosition"){//IE6~8은 backgroundPosition 작성과 호환되지 않습니다. backgroundPositionX/를 식별합니다. Y
if (ie){                                                                                              > (obj,null)[attr];
}
}




전체 테스트 코드 예시:
HTML 코드

코드 복사

코드는 다음과 같습니다.

box1의 CSS.#box1{margin:5px;padding:5px;height:100px;width:200px;}

box1의 여백 상단 가져오기

box1의 패딩 상단 가져오기

box1의 높이를 가져옵니다


<script>//클래스에서 속성 값 가져오기<p>var divs=document.getElementById("box1");<br>function getStyle(obj,attr){<br> var ie = ! "v1";//간단한 판단 ie6~8<br> if(attr=="BackgroundPosition"){//IE6~8은 backgroundPosition 작성 방법과 호환되지 않습니다. backgroundPositionX/Y<br> 식별 if(ie){ return obj.currentStyle.BackgroundPositionX " " obj.currentStyle.BackgroundPositionY;</p> }<p> }<br> if(obj.currentStyle){<br> return obj.currentStyle[attr];<br> }<br> else{<br> return document.defaultView.getCompulatedStyle(obj,null)[attr];<br> }<br>}<br>function getcss(typ){<br> Alert(getStyle(divs,typ)); <br>}<br></script>