document.body.style.marginTop Rückgabe leere Zeichenfolge in JS

Question

Es war mein Verständnis, dass [einige elem] .style.maginTop eine Zeichenfolge mit dem oberen Rand des Elements zurückgeben würde.

Stattdessen bekomme ich immer eine leere Zeichenfolge. Ich möchte das mit dem Körper benutzen, aber ich habe auch ein div versucht, und das hat auch nicht funktioniert.

console.log(document.body.style.marginTop); // logs "" 
 
console.log(typeof(document.body.style.marginTop)); // logs "String" 
 

 
var elem = document.getElementById("testDiv"); 
 
console.log(elem.style.marginTop); // logs ""

body { 
 
    margin-top:100px; 
 
} 
 
#testDiv { 
 
    margin-top:50px; 
 
}

hi! 
 

 
<div id="testDiv">test</div>

Ich bin mir nicht sicher, was ich falsch mache ... Hat jemand eine nicht-jQuery Lösung für dieses?

Answer 1

Das HTMLElement.style liefert nur Inline-Styles:

Die HTMLElement.style Eigenschaft gibt ein CSSStyleDeclaration Objekt, das den Stil des Elements Attribut darstellt.

Um die Stile zugreifen Sheets Window.getComputedStyle(element) verwenden:

Die Window.getComputedStyle() -Methode, die Werte von alle CSS-Eigenschaften eines Elements gibt nach der aktiven Sheets und Lösung aller grundlegenden Anwendung Berechnung, die diese Werte enthalten können.

var elem = document.getElementById("testDiv"); 
 
var style = window.getComputedStyle(elem); 
 

 
//output 
 
document.body.innerHTML = style.marginTop;

body { 
 
    margin-top:100px; 
 
} 
 
#testDiv { 
 
    margin-top:50px; 
 
}

hi! 
 

 
<div id="testDiv">test</div>

Answer 2

anstelle Kern Javascript verwenden, können Sie js Bibliothek jQuery verwenden. Dann diesen syntaxt verwenden, um seinen Wert zu erhalten .:

console.log($('body').css('margin-top')); 

für reine Javascript verwendet diese

var element = document.body, 
    style = window.getComputedStyle(element), 
    margin_top = style.getPropertyValue('margin-top'); 
     console.log(margin_top); 

http://jsfiddle.net/hAw53/726/

Answer 3

Hm, ich versuchte es auch mit dem gleichen Ergebnis wie Sie. Eine schnelle Google-Suche ergab Using JavaScript to read html/body tag margin-top, die style.getPropertyValue() verwendet, um die Informationen zurückzugeben, die Sie suchen.

Answer 4

Sie können getComputedStyle und getPropertyValue verwenden, um den oberen Rand zu erhalten.

console.log(document.body.style.marginTop); // logs "" 
 
console.log(typeof(document.body.style.marginTop)); // logs "String" 
 

 
var elem = document.getElementById("testDiv"); 
 
//console.log(elem.style.marginTop); // logs "" 
 
console.log(getComputedStyle(elem).getPropertyValue("margin-top")); 
 
alert(getComputedStyle(elem).getPropertyValue("margin-top"));

body { 
 
    margin-top:100px; 
 
} 
 
#testDiv { 
 
    margin-top:50px; 
 
}

hi! 
 

 
<div id="testDiv">test</div>

Getestet und Arbeiten.

Answer 5

Ich weiß nicht warum, aber ich habe es funktioniert, indem ich zuerst die margin-top von JS zuweisen.

document.getElementById("testDiv").style.marginTop = '50px'; 
 
document.body.style.marginTop = '100px'; 
 
alert(document.getElementById("testDiv").style.marginTop); 
 
alert(document.body.style.marginTop);

body { 
 
    margin-top: 100px; 
 
} 
 
#testDiv { 
 
    margin-top: 50px; 
 
}

hi! 
 

 
<div id="testDiv">test</div>