Come arrivare larghezza del bordo in jQuery/javascript

Question

Come posso analizzare il larghezza del bordo da

style="border: solid 1px black;"

in jQuery/javascript?

$elem.css('border-width')

non lo fa.

Nota ho bisogno di analizzare la larghezza dal CSS, come l'elemento può essere display:none

Grazie

Edit non sto realtà usando uno stile in-line, ho appena scritto che strada per la semplicità in quanto non mi rendevo conto che c'era qualche differenza comportamentale. Sembra funzionare bene per gli stili incorporati, ma non può ancora ottenere alcun valore da una classe css applicata.

Answer 1

Si può semplicemente utilizzare parseInt(); per analizzare la larghezza del bordo Npx-N:

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

ho avuto un Google intorno e sembra al fine di ottenere la larghezza di un bordo si deve fornire un lato esplicito del bordo:

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

Questo è s perché è possibile che ogni bordo abbia una dimensione, uno stile e un colore diversi. Sfortunatamente non sembra essere più semplice di così.

Answer 2

jQuery non consente l'uso di - quando si fa riferimento a una proprietà CSS, quindi rimuovere l'ipn e capitalizzare la seguente lettera.

$elem.css('borderWidth'); 

Coded in jsFiddle to demonstrate.

Answer 3

Per completare la risposta di generico quando si cerca lasciò di confine e di includere il commento di sfuggente su radix:

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

nello script:

var width =parseInt($('div').css('borderLeftWidth'),10); 
alert(width); 

Answer 4

var bordersOnBothSides = $("#measureMe").outerWidth() - $("#measureMe").innerWidth()); 

Answer 5

Ottenere la larghezza del bordo.
elementi Esempio HTML:

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

---

semplice modo Jquery utilizzando l'HTML sopra:

> $(".example").css("border-width"); 
< "10px" 

---

Anche quando la ricerca su internet, ho trovato una soluzione
che funziona senza utilizzare il Jquery libreria javascript
(Penso che Jquery probabilmente usi comunque una soluzione come questa):
http://javascript.info/tutorial/styles-and-classes-getcomputedstyle
(Il Tutorial JavaScript, © Ilya Kantor)

Leggermente più lungo modo non Jquery utilizzando il codice HTML di cui sopra:

> 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" 

Fatto! Spero che chiunque lo stia capendo e forse lo trovi utile.
Inoltre, vedere this jsFiddle (https://jsfiddle.net/user_e/2L8yLc7a/) che dimostra la mia risposta.

Answer 6

Se la u ha uguali widh bordo per elemento, oppure u sono tenuti a sinistra, larghezza del bordo superiore, js pianura:

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

da ottenere, in basso a uso transfrontaliero jquery + css:

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