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

как мне разобрать ширину границы от

style="border: solid 1px black;"

в jQuery / javascript?

$elem.css('border-width')

не делает этого.

Примечание мне нужно разобрать ширину из css, так как элемент может быть display:none

спасибо

Edit Я на самом деле не использую встроенный стиль, я просто написал его таким образом для простоты, поскольку я не понимал, что есть какая-то разница в поведении. Кажется, он отлично работает для однако встроенные стили, но все еще не могут получить никакого значения из примененного класса css.

6 54
javascript css jquery

6 ответов:

вы можете просто использовать parseInt(); для разбора ширины границы от Npx до N:

var width = $elem.css('borderWidth'); // 150px
var parsed = parseInt(width);         // 150

у меня был Google вокруг, и он появляется, чтобы получить ширину границы, вы должны предоставить явную сторону границы:

var borderWidth = $elem.css("border-left-width");

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

88

jQuery не позволяет использовать - при ссылке на свойство CSS, поэтому удалите дефис и заглавную букву следующей буквы.

$elem.css('borderWidth');

закодировано в jsFiddle для демонстрации.

9

чтобы завершить ответ Generic при поиске он покинул границу и включить комментарий неуловимого о radix:

<div style="border-style:solid;border-left-width:15px;"></div>

в скрипт:

var width =parseInt($('div').css('borderLeftWidth'),10);
alert(width);
6
var bordersOnBothSides = $("#measureMe").outerWidth() - $("#measureMe").innerWidth() );
4

Если у вас есть равная ширина границы для элемента, или вам нужна левая, верхняя ширина границы, обычная js:

elem.clientLeft; //get left border of element
elem.clientTop; //get top border of element

чтобы получить право, нижняя граница использовать jquery + css:

parseInt($(elem).css('borderLeftWidth'),10); // 10 use to get result in dec, not hex number system
1

получение ширины границы.
Пример элементов HTML:

<div>
  <style> .example {border: 10px solid lightblue} </style>
  <div class="example" style="width: 10px; height: 10px;"></div>
</div>

Простой способ Jquery с использованием HTML выше: 
> $(".example").css("border-width");
< "10px"

Также при поиске в Интернете, я нашел решение
это работает без использования библиотеки javascript Jquery
(Я думаю, что Jquery, вероятно, использует такое решение anyway):
http://javascript.info/tutorial/styles-and-classes-getcomputedstyle
(яваскрипт Учебник, © Илья Кантор)

немного более длинный способ не-Jquery, используя HTML выше:

> var element = document.getElementById("test");
< undefined
> var computed_style = getComputedStyle(element);
< CSSStyleDeclaration {0: "animation-delay", 1: "animation-direction", 2: "animation-duration", 3: "animation-fill-mode", 4: "animation-iteration-count", 5: "animation-name", 6: "animation-play-state", 7: "animation-timing-function", 8: "background-attachment", 9: "background-blend-mode", 10: "background-clip", 11: "background-color", 12: "background-image", 13: "background-origin", 14: "background-position", 15: "background-repeat", 16: "background-size", 17: "border-bottom-color", 18: "border-bottom-left-radius", 19: "border-bottom-right-radius", 20: "border-bottom-style", 21: "border-bottom-width", 22: "border-collapse", 23: "border-image-outset", 24: "border-image-repeat", 25: "border-image-slice", 26: "border-image-source", 27: "border-image-width", 28: "border-left-color", 29: "border-left-style", 30: "border-left-width", 31: "border-right-color", 32: "border-right-style", 33: "border-right-width", 34: "border-top-color", 35: "border-top-left-radius", 36: "border-top-right-radius", 37: "border-top-style", 38: "border-top-width", 39: "bottom", 40: "box-shadow", 41: "box-sizing", 42: "caption-side", 43: "clear", 44: "clip", 45: "color", 46: "cursor", 47: "direction", 48: "display", 49: "empty-cells", 50: "float", 51: "font-family", 52: "font-kerning", 53: "font-size", 54: "font-stretch", 55: "font-style", 56: "font-variant", 57: "font-variant-ligatures", 58: "font-weight", 59: "height", 60: "image-rendering", 61: "isolation", 62: "left", 63: "letter-spacing", 64: "line-height", 65: "list-style-image", 66: "list-style-position", 67: "list-style-type", 68: "margin-bottom", 69: "margin-left", 70: "margin-right", 71: "margin-top", 72: "max-height", 73: "max-width", 74: "min-height", 75: "min-width", 76: "mix-blend-mode", 77: "object-fit", 78: "object-position", 79: "opacity", 80: "orphans", 81: "outline-color", 82: "outline-offset", 83: "outline-style", 84: "outline-width", 85: "overflow-wrap", 86: "overflow-x", 87: "overflow-y", 88: "padding-bottom", 89: "padding-left", 90: "padding-right", 91: "padding-top", 92: "page-break-after", 93: "page-break-before", 94: "page-break-inside", 95: "pointer-events", 96: "position", 97: "resize", 98: "right", 99: "speak"…}
> computed_style.borderWidth;
< "10px"

готово! Я надеюсь, что кто-нибудь читает это понимает и, возможно, находит это полезным.
Кроме того, см. этот jsFiddle (https://jsfiddle.net/user_e/2L8yLc7a/), который демонстрирует мой ответ.

0