Как получить значение поля div в обычном JavaScript?

Ответ 1

Свойства объекта style - это только стили, применяемые непосредственно к элементу (например, через атрибут style или код). Таким образом, .style.marginTop будет иметь что-то в нем, если у вас есть что-то специально назначенное этому элементу (не назначенное через таблицу стилей и т.д.).

Чтобы получить текущий рассчитанный стиль объекта, вы используете либо currentStyle свойство (Microsoft), либо getComputedStyle (почти все остальные).

Пример:

var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);

display("Current marginTop: " + style.marginTop);

Справедливое предупреждение: то, что вы получаете, может не быть в пикселях. Например, если я запустил выше в элементе p в IE9, я вернусь "1em".

Live Copy | Источник

Ответ 2

Я нашел что-то очень полезное на этом сайте, когда искал ответ на этот вопрос. Вы можете проверить это на http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html. Часть, которая мне помогла, была следующей:

var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
alert(marLeft);
/* and if a number needs to be in px... */
alert(marLeft + 'px');

////////////////////////////////////

/***
 * get live runtime value of an element css style
 *   http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
 *     note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
 ***/
var getStyle = function (e, styleName) {
    var styleValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle) {
        styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
    }
    else if(e.currentStyle) {
        styleName = styleName.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        styleValue = e.currentStyle[styleName];
    }
    return styleValue;
}

Ответ 3

Кроме того, вы можете создать свои собственные элементы outerHeight для HTML. Я не знаю, работает ли он в IE, но работает в Chrome. Возможно, вы можете улучшить код ниже, используя currentStyle, предложенный в ответе выше.

Object.defineProperty(Element.prototype, 'outerHeight', {
    'get': function(){
        var height = this.clientHeight;
        var computedStyle = window.getComputedStyle(this); 
        height += parseInt(computedStyle.marginTop, 10);
        height += parseInt(computedStyle.marginBottom, 10);
        height += parseInt(computedStyle.borderTopWidth, 10);
        height += parseInt(computedStyle.borderBottomWidth, 10);
        return height;
    }
});

Этот кусок кода позволяет вам сделать что-то вроде этого:

document.getElementById('foo').outerHeight

Согласно caniuse.com, getComputedStyle поддерживается основными браузерами (IE, Chrome, Firefox).