Получение ширины границы в jQuery

Я должен динамически размещать элемент popup внутри контейнера. Я пытаюсь получить ширину границы контейнера. Я нашел несколько таких вопросов, как этот:

Как получить ширину границы в jQuery/javascript

Моя проблема обсуждалась, но я не нашел ответов. Как вы получаете ширину границы, когда свойство является толстым, тонким или средним?

На улице есть слово, из которого обычно можно ожидать, что тонкие, средние и толстые будут равны 2px, 4px и 6px соответственно, но спецификация CSS не требует этого.

Кто-нибудь сталкивается с простым (или, если не проще, по крайней мере непротиворечивым) способом получить ширину границы на одном краю элемента DOM?

ОТВЕТЫ

Ответ 1

Я играл с этим еще немного, и единственным решением, которое я смог придумать, было бы неплохо, если бы вопрос был подобным:

var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;

function getLeftBorderWidth($element) {
    var leftBorderWidth = $element.css("borderLeftWidth");
    var borderWidth = 0;


    switch (leftBorderWidth) {
    case "thin":
        borderWidth = thinBorder;
        break;
    case "medium":
        borderWidth = mediumBorder;
        break;
    case "thick":
        borderWidth = thickBorder;
        break;
    default:
        borderWidth = Math.round(parseFloat(leftBorderWidth));
        break;
    }

    return borderWidth;
}

function getRightBorderWidth($element) {
    var rightBorderWidth = $element.css("borderRightWidth");
    var borderWidth = 0;


    switch (rightBorderWidth) {
    case "thin":
        borderWidth = thinBorder;
        break;
    case "medium":
        borderWidth = mediumBorder;
        break;
    case "thick":
        borderWidth = thickBorder;
        break;
    default:
        borderWidth = Math.round(parseFloat(rightBorderWidth));
        break;
    }

    return borderWidth;
}​

DEMO

Обратите внимание на Math.round() и parseFloat(). Это происходит потому, что IE9 возвращает 0.99px для thin вместо 1px и 4.99px для thick вместо 5px.

Edit

Вы упомянули в комментариях, что IE7 имеет разный размер для тонких, средних и толстых.
Кажется, что они выключены только с помощью .5px, с которыми вам будет трудно справиться, поскольку вам больше всего нужны полные номера.

Мое предложение состояло бы в том, чтобы либо просто игнорировать .5px разницы, и признать наиболее вероятные незаметные недостатки при использовании IE7 и ниже, или если вы преувеличены, чтобы справиться с этим, чтобы скорректировать константы так же, как:

var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;

// Will be -1 if MSIE is not detected in the version string
var IEVersion = navigator.appVersion.indexOf("MSIE");

// Check if it was found then parse the version number. Version 7 will be 17 but you can trim that off with the below.
If(IEVersion > -1){
    IEVersion = parseInt(navigator.appVersion.split("MSIE")[1]);
}

// Now you can simply check if you are in an ancient version of IE and adjsut any default values accordingly.
If(IEVersion < 7){
    thinBorder = 0.5;
    mediumBorder = 3.5;
    thickBorder = 4.5;
}

/// rest as normal

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

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

Это должно помочь вам начать работу достаточно хорошо.

Ответ 2

Вы можете использовать .innerWidth() и .outerWidth(), чтобы получить ширину с границами и без них и вычесть вторую из первой.

var someElement = $("#someId");
var outer = someElement.outerWidth();
var inner = someElement.innerWidth();

alert(outer - inner); // alerts the border width in pixels

Ответ 3

обычно, если у вас есть:

<div id="container">myContainer</div>

вы можете получить атрибут Border-Width с помощью jQuery:

var borderWidth = $('#container').css('borderWidth');
alert(borderWidth);

или для каждой стороны:

var left = $('#container').css('borderLeftWidth');
var right = $('#container').css('borderRightWidth');
var top = $('#container').css('borderTopWidth');
var bottom = $('#container').css('borderBottomWidth');

alert(left+" "+right+" "+top+" "+bottom);

Ответ 4

Получить ширину границы:

<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border");
   alert(widthBorder);
   //you can split between sintax 'px'
});
</script>

Ответ 5

У меня есть решение, использующее дополнительный внутренний контейнер, чтобы обойти проблему и вычислить реальную границу со всеми сторонами контейнера. Поэтому, если в вашей ситуации возможен дополнительный внутренний контейнер, то эта скрипта работает для меня в Chrome/FF/Safari/IE7/IE8 и с пиксельные определения границ, а также тонкие/средние/толстые:

var BorderWrapper = {
    getBorderWidth: function(elem) {
        elem = jQuery(elem);
        var elemInner = jQuery(elem).find('.borderElemInner');

        var posOuter = elem.position();
        var posInner = elemInner.position();

        var result = {
            top:    posInner.top - posOuter.top - parseInt(elem.css('marginTop')),
            right:  0,
            bottom: 0,
            left:   posInner.left - posOuter.left - parseInt(elem.css('marginLeft'))
        };

        result.right = jQuery(elem).outerWidth() 
                     - jQuery(elemInner).outerWidth() 
                     - result.left;

        result.bottom = jQuery(elem).outerHeight() 
                      - jQuery(elemInner).outerHeight() 
                      - result.top;

        return result;
    }
};

Он использует jQuery ''.position() '', ''.outerWidth() '' и ''.outerHeight() '', а также учитывает запас внешнего контейнера.

Может кто-нибудь может проверить это в IE9? У меня его нет:)

Ответ 6

<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border","5px");
  // you can increase your pixel size according to your requirement.
});
</script>