Получить ширину границы из div с помощью простого javascript

Ответ 1

Попробуйте приведенный ниже javascript:

alert($("#content").css("border-left-width")); //using jquery.

или

alert(getComputedStyle(document.getElementById('content'),null).getPropertyValue('border-left-width'));//without jquery.

getComputedStyle (элемент, псевдо)

: Элемент для стилизации для

pseudo: псевдоселектор, подобный 'hover или null, если не нужен.

Ссылка ссылки: http://javascript.info/tutorial/styles-and-classes-getcomputedstyle

Ответ 2

Возможно, я опоздал, но, поскольку вы не отметили его как ответ, я подумал, что могу попробовать.

Если ваша проблема заключалась в совместимости между браузером, я бы создал пользовательский метод, который я мог бы использовать почти в каждом браузере (это означает возврат к самым основам).

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

Эта функция решает ваш вопрос, и внизу приведены некоторые примеры использования.

Эти функции используют "шаблон модуля" через непосредственную функцию, которая будет запущена, как только загрузится script, создавая метод, который НЕ будет публиковать глобальную область действия, но расширяет ее функциональность с помощью функции, чтобы делать то, что вы хотели.

// I give it a name but it can also be anonymous
(function preloadedFunctions(){
    // Preseted methods.
    if(window.getComputedStyle){
        window.getComputedStylePropertyValue = function(element, prop){
            var computedStyle = window.getComputedStyle(element, null);
            if(!computedStyle) return null;
            if(computedStyle.getPropertyValue) {
                return computedStyle.getPropertyValue(prop);
            } else if (computedStyle.getAttribute) {
                return computedStyle.getAttribute(prop);
            } else if(computedStyle[prop]) {
                return computedStyle[prop];
            };
        };
    }
    // jQuery JavaScript Library v1.9.0
    // http://www.minhacienda.gov.co/portal/pls/portal/PORTAL.wwsbr_imt_services.GenericView?p_docname=6240612.JS&p_type=DOC&p_viewservice=VAHWSTH&p_searchstring=
    // For IE8 or less
    else if ( document.documentElement.currentStyle ) {
        var rnumnonpx = new RegExp( "^(" + core_pnum + ")(?!px)[a-z%]+$", "i" ),
        rposition = /^(top|right|bottom|left)$/,
        core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source;
        window.getComputedStylePropertyValue = function(element, prop){
            var left, rsLeft,
            ret = element.currentStyle && element.currentStyle[ prop ],
            style = element.style;

            if ( ret == null && style && style[ prop ] ) {
                ret = style[ prop ];
            }
            if ( rnumnonpx.test( ret ) && !rposition.test( prop ) ) {
                left = style.left;
                rsLeft = element.runtimeStyle && element.runtimeStyle.left;
                if ( rsLeft ) {
                    element.runtimeStyle.left = element.currentStyle.left;
                }
                style.left = prop === "fontSize" ? "1em" : ret;
                ret = style.pixelLeft + "px";
                style.left = left;
                if ( rsLeft ) {
                    element.runtimeStyle.left = rsLeft;
                }
            }
            return ret === "" ? "auto" : ret;
        };
    };
})();

то есть.

1.-

var borderWidth = getComputedStylePropertyValue(document.getElementsByTagName("div")[0], "border-width");
console.log(borderWidth);

2.-

var div = document.getElementById("someID");
console.log(getComputedStylePropertyValue(div, "border-width")); 

Ответ 3

Очень старый вопрос, но в любом случае...
plain javascript и должно работать и в старых браузерах.
Он измеряет размер элемента, с и без границ.

Следующий пример должен работать правильно, если границы вокруг элемента имеют одинаковый размер. Если нет, процедура не сильно изменится, вам просто нужно установить границы равными нулю, один за другим.

var ele=document.getElementById("content");
// measures the element width, WITH borders
var w=ele.offsetWidth;
var cssBackup=ele.style.cssText;
// sets the borders to zero
ele.style.border="0px";
// computes the border size
var bord=(w-ele.offsetWidth)/2;
// resets the css
ele.style.cssText=cssBackup;
alert(bord);

Ответ 4

Согласно W3Schools, это свойство поддерживается основными браузерами. Таким образом, у вас не должно быть никаких трудностей с его использованием.

Однако использование фреймворка JavaScript, такого как jQuery, всегда поможет вам не беспокоиться о таких тривиальных проблемах, как эта.