документ.тело.стиль.marginTop возвращает пустую строку в JS

насколько я понимаю, это [какой-то элемент].стиль.maginTop вернет строку с верхним краем элемента.

вместо этого я всегда получаю пустую строку. Я хочу использовать это с телом, но я также попробовал div, и это тоже не сработало.

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>

Я не уверен, что я делаю неправильно... У кого-нибудь есть не-jQuery решение для этого?

8
javascript margin

5 ответов

на HTMLElement.стиль возвращает только встроенные стили:

HTMLElement.свойство style возвращает объект CSSStyleDeclaration, представляющий атрибут стиля элемента.

для доступа к стилям из таблиц стилей используйте

11

можно использовать getComputedStyle и getPropertyValue чтобы получить верхнюю границу.

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>

проверено и работает.

3

я не знаю, почему, но я получил его работу, неявно назначив margin-top через JS в первую очередь. Я знаю, почему мой ответ работает (прошло более 2 лет, поэтому я лучше знаю, почему). Установив значения div#test и body to 50px и 100px такой:

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

я фактически устанавливаю свойство CSS / значение встроенных элементов:

<body style='margin-top: 100px'>
  <div id='testDiv' style='margin-top: 50px'>test</div>
</body>

, когда .style свойство используется, свойство/значение CSS, которое следует за ним, всегда встроено. Одна важная вещь, которую нужно помнить о встроенных стилях CSS, - это то, что они имеют более высокий приоритет, чем другие 2 средства объявления CSS: внешние таблицы стилей (ex. <link href="file.css"...) и встроенная таблица стилей (ex. <style>...</style>). Единственный способ переопределить встроенный стиль-использовать !important (если конечно встроенный стиль имеет !important как хорошо.)

Итак, если.style свойство используется для чтения свойства / значения элемента, оно будет возвращать только встроенное значение стиля, если оно действительно существует, которое в Случай OP этого никогда не делал, и в моем случае это было так, потому что я использовал .style для присвоения свойства / значений. Хотя мое решение является правильным, ответы на Николо и Г-Н Карлссон лучше, так как вы получите значения из всех таблиц стилей CSS.

document.getElementById("testDiv").style.marginTop = '50px';
document.body.style.marginTop = '100px';
console.log(document.getElementById("testDiv").style.marginTop);
console.log(document.body.style.marginTop);
body {
  margin-top: 100px;
}

#testDiv {
  margin-top: 50px;
}
hi!

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

Хм, я тоже пробовал с тем же результатом, что и вы. Быстрый поиск google оказался использование JavaScript для чтения html / body tag margin-top который использует стиль.getPropertyValue() возвращает информацию, которую вы ищете.

0

вместо использования основного javascript, позвольте вам использовать JS library jQuery. Затем используйте этот syntaxt, чтобы получить его значение.:

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

для чистого javascript используйте это 

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

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

0