¿Cómo obtengo el radio del borde de un elemento usando jQuery?

Question

Tengo un div, con el siguiente HTML y CSS. En un intento de hacer que mi código JavaScript sea más robusto, estoy tratando de recuperar ciertos atributos CSS del elemento seleccionado.

Sé cómo usar el get .css() para obtener elementos, pero ¿cómo obtener el radio del borde usando ese método?

La documentación de jQuery es escasa.

HTML:

<div id="#somediv"></div> 

CSS:

#somediv { 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

Answer 1

supongo que no admitido oficialmente todavía, ya que es un poco impredecible ... En Firefox usando $("#somediv").css("-moz-border-radius", "20px"); fijará la multa radio de frontera, pero intentar leerlo nuevamente a través del $("#somediv").css("-moz-border-radius"); devuelve una cadena vacía ... Sin embargo, parece que Firefox explota el radio del borde en sus partes componentes, lo que significa que $("#somediv").css("-moz-border-radius-topleft"); funcionará (obviamente solo devuelve la configuración de una esquina) aunque).

---

Editar:

Como Tgr points out$('#foo').css('MozBorderRadius') le permitirá leer de nuevo de forma genérica en Firefox. Y como señala Bradley Mountford en un comentario más abajo, parece que se puede leer en Webkit utilizando las partes componentes también (aunque sólo el cromo parece que le gusta border-top-left-radius, donde como tanto Chrome Safari & manejar -webkit-border-top-left-radius ...

Así resumiendo , se obtiene el siguiente (en base al ajuste 5px):

en Firefox:

$("#somediv").css("MozBorderRadius");    //"5px 5px 5px 5px" 
$("pre").css("-moz-border-radius-topleft");  //"5px" 

en Webkit (probado & en Chrome, Safari):

$("pre").css("-webkit-border-top-left-radius"); //"5px 5px" 

Answer 2

En Firefox, al menos, la lectura con $('#foo').css('MozBorderRadius') obras. $('#foo').css('-moz-border-radius') no, aunque funciona al establecer el valor.

Answer 3

Las respuestas anteriores no me funcionaron.

El código siguiente funciona para mí en Firefox y Chrome, y proporcionará el radio del borde de cada esquina, pero solo para un elemento con una ID. Sin embargo, jQuery.

Más información here:]

function getStyle(oElm, css3Prop) { 
 

 
    var strValue = ""; 
 

 
    if (window.getComputedStyle) { 
 
    strValue = getComputedStyle(oElm).getPropertyValue(css3Prop); 
 
    } 
 
    //IE 
 
    else if (oElm.currentStyle) { 
 
    try { 
 
     strValue = oElm.currentStyle[css3Prop]; 
 
    } catch (e) {} 
 
    } 
 

 
    return strValue; 
 
} 
 

 
//call as follows 
 
var brTopLeft = getStyle(document.getElementById("element"), "border-top-left-radius"); 
 
var brTopRight = getStyle(document.getElementById("element"), "border-top-right-radius"); 
 
var brBottomRight = getStyle(document.getElementById("element"), "border-bottom-right-radius"); 
 
var brBottomLeft = getStyle(document.getElementById("element"), "border-bottom-left-radius"); 
 

 

 
document.getElementById("br-tl").innerHTML = brTopLeft; 
 
document.getElementById("br-tr").innerHTML = brTopRight; 
 
document.getElementById("br-br").innerHTML = brBottomRight; 
 
document.getElementById("br-bl").innerHTML = brBottomLeft;

#element { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 20px; 
 
    border: 2px solid black; 
 
    border-radius: 5px 10px 14px 23px; 
 
} 
 

<div id="element"></div> 
 

 
<p>Border-radius-top-left: <span id="br-tl"></span> 
 
</p> 
 
<p>Border-radius-top-right: <span id="br-tr"></span> 
 
</p> 
 

 

 
<p>Border-radius-bottom-left: <span id="br-bl"></span> 
 
</p> 
 
<p>Border-radius-bottom-right: <span id="br-br"></span> 
 
</p>