Div.에서 마진, 패딩, 높이, 테두리 등을 얻는 방법. 문서로 직접 얻을 수 있다고 말할 수 있습니다. 그러나 당신이 말한 것은 레이블에 직접 작성된 속성 만 얻을 수 있으며 레이블 스타일 외부의 속성 (예 : CSS 파일의 속성)을 얻을 수 없습니다. 다음 방법을 얻을 수 있습니다.
인스턴스 렌더링은 다음과 같습니다.
JS는 CSS 속성을 얻을 때 CSS에서 속성을 직접 얻을 수 없으므로이를 수행하려면 하나의 방법이 필요합니다.
GetStyle (obj, attr) 호출 메소드 설명 : OBJ는 객체이며, attr는 속성 이름의 호환성이 JS의 쓰기와 호환되어야합니다 (참조 : JS 스타일 스타일을 제어 할 수 있음).
JS 코드
다음과 같이 코드 코드를 복사하십시오.
함수 getStyle (obj, attr) {
var IE =!+"/v1"; // 간단한 판단 IE6 ~ 8
iftr == "BackgroundPosition") {// IE6 ~ 8은 BackgroundPositionX/Y를 식별하기 위해 배경 위치와 호환되지 않습니다.
if (예 :) {{
return obj.currentStyle.backgroundPositionX +" +obj.currentStyle.BackRoundPositiony;
}
}
if (obj.currentStyle) {
return obj.currentStyle [attr];
}
또 다른 {
return document.defaultView.getComputedStyle (OBJ, NULL) [attr];
}
}
전체 인스턴스 테스트 코드 :
HTML 코드
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" /> />
<title> js 특정 요소 클래스에서 CSS 속성 값을 가져옵니다 </title>
<스타일>
#box1 {마진 : 5px;
{국경 #CCC; 12px;}
A : 호버 {색상 : #ff0000; #fff;}
</스타일>
</head>
<body>
<div id = "box1의 CSS.#마진 : 5px;
<a href = "JavaScript :; onclick ="getcss ( 'margintop') ">
<a href = "javaScript :; onclick ="getcss ( 'paddingtop') "> 패딩 탑 get </a> < /> <br />
<a href = "javaScript :; onclick ="getcss ( 'height') "> 높이 </a> <br />
<cript>
// 클래스에서 속성 값을 얻습니다
var divs = document.getElementById ( "box1");
함수 getStyle (obj, attr) {
var IE =!+"/v1"; // 간단한 판단 IE6 ~ 8
iftr == "BackgroundPosition") {// IE6 ~ 8은 BackgroundPositionX/Y를 식별하기 위해 배경 위치와 호환되지 않습니다.
if (예 :) {{
return obj.currentStyle.backgroundPositionX +" +obj.currentStyle.BackRoundPositiony;
}
}
if (obj.currentStyle) {
return obj.currentStyle [attr];
}
또 다른 {
return document.defaultView.getComputedStyle (OBJ, NULL) [attr];
}
}
함수 getcss (typ) {
경고 (GetStyle (divs, typ));
}
</스크립트>
</body>
</html>