conseguir el ancho del borde.
elementos Ejemplo HTML:
<div>
<style> .example {border: 10px solid lightblue} </style>
<div class="example" style="width: 10px; height: 10px;"></div>
</div>
simple manera Jquery utilizando el HTML anterior:
> $(".example").css("border-width");
< "10px"
También cuando la búsqueda en Internet, he encontrado una solución
que funciona sin necesidad de utilizar el Jquery javascript library
(creo que Jquery probablemente use una solución como esta de todos modos):
http://javascript.info/tutorial/styles-and-classes-getcomputedstyle
(El Javascript Tutorial, © Ilya Kantor)
Ligeramente más largo manera no Jquery utilizando el HTML anterior:
> 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"
hecho! Espero que cualquiera que lea esto entienda y tal vez lo encuentre útil.
También, vea this jsFiddle (https://jsfiddle.net/user_e/2L8yLc7a/) que demuestra mi respuesta.
En en el pasado, he evitado problemas como este usando visibilidad: oculto o estableciendo una posición absoluta muy lejos de la pantalla (es decir, 'izquierda: -10000px'). Si pudieras hacer eso, un simple '$ (elem) .outerWidth (false) - $ (elem) .innerWidth()' te daría el ancho del borde. – MikeWyatt