2010-09-24 40 views
53

¿Cómo analizo el ancho del borde deComo llegar ancho del borde en jQuery/javascript

style="border: solid 1px black;"

en jQuery/javascript?

$elem.css('border-width')

no lo hace.

Nota necesito para analizar el ancho de la CSS, ya que el elemento puede ser display:none

Gracias

Editar realidad no estoy usando un estilo en línea, que acabo de escribir lo que camino a la simplicidad ya que no me di cuenta de que había alguna diferencia de comportamiento. Sin embargo, parece funcionar bien para los estilos en línea, pero todavía no puede obtener ningún valor de una clase CSS aplicada.

+3

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

Respuesta

87

Usted sólo puede usar parseInt(); para analizar el ancho del borde Npx-N:

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

que tenía un Google alrededor y parece que con el fin de obtener el ancho de un borde que debe proporcionar un lado explícito del borde:

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

Este i s porque es posible que cada borde tenga un tamaño, estilo y color diferentes. Lamentablemente, no parece ser más simple que esto.

+23

+1! Sugerencia: siempre incluya la raíz: 'parseInt (ancho, 10)'. El valor predeterminado es hexadecimal. 'parseInt (" 08 ") === 0' y' parseInt ("08", 10) === 8' – jwueller

+1

También puede usar esta derivada del ejemplo jsFiddle de ILMV para confirmar que los valores establecidos por las propiedades abreviadas aún retornan correctamente: http://jsfiddle.net/s7YAN/1/ – ssokolow

+0

+1, no estaba seguro de si su pregunta tenía problemas para obtener la propiedad o analizarla. –

9

jQuery no permite el uso de - al hacer referencia a una propiedad de CSS, por lo tanto, elimine el hypen y escriba en mayúscula la siguiente letra.

$elem.css('borderWidth'); 

.

+0

no, aún no puede hacer que funcione si el estilo no está en línea. ver http://jsfiddle.net/s7YAN/2/ – fearofawhackplanet

+4

@Ben Everard - jQuery permite hyphnes - es solo CSS corto que no está permitido - así que el ancho del borde izquierdo está bien, pero el ancho del borde no. – chris

+1

Su declaración no es verdadera. Se cambió el violín a 'border-width' y todavía funciona: http://jsfiddle.net/s7YAN/500/ –

6

Para completar la respuesta de Genérico cuando se busca que dejó la frontera y para incluir el comentario de evasiva sobre radix:

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

en escritura:

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

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.

+0

Podría hacer un jsFiddle para demostrar mi respuesta mejor y más visualmente. – Edward

+0

jsFiddle que demuestra mi respuesta: https://jsfiddle.net/user_e/2L8yLc7a/ – Edward

1

Si tienen anchura frontera igual para el elemento, o la necesidad de u izquierda, el ancho del borde superior, js llano:

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

Para tener derecho, inferior utilización frontera jQuery + css:

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