Jak uzyskać promień obramowania z elementu za pomocą jQuery?

Question

Mam div z następującym kodem HTML i CSS. Próbując ulepszyć mój kod Javascript, próbuję pobrać pewne atrybuty CSS z wybranego elementu.

Wiem, jak użyć gettera .css(), aby uzyskać elementy, ale jak uzyskać promień obramowania za pomocą tej metody?

Dokumentacja jQuery jest skąpa.

HTML:

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

CSS:

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

Answer 1

Zgaduję, że nie jest jeszcze oficjalnie obsługiwane, ponieważ jest nieco nieprzewidywalny ... W Firefoksie za pomocą $("#somediv").css("-moz-border-radius", "20px"); ustawi promienia granicy grzywny, ale próba odczytania go za pomocą $("#somediv").css("-moz-border-radius"); zwraca pusty ciąg ... Jednak wygląda na to, że Firefox wybucha promień obramowania na jego części składowe, co oznacza, że ​​zadziała $("#somediv").css("-moz-border-radius-topleft"); (w oczywisty sposób zwraca tylko ustawienia narożnika chociaż).

---

Edit:

Jak Tgr points out$('#foo').css('MozBorderRadius') pozwoli zapoznać go z powrotem rodzajowo w Firefoksie. I jak Bradley Mountford zauważa w komentarzu poniżej, wygląda jak można odczytać z Webkit użyciu części składowe zbyt (choć tylko chrom wydaje się podoba border-top-left-radius, gdzie jako zarówno Chrome & Safari obsługiwać -webkit-border-top-left-radius ...

Więc podsumowując , można uzyskać następujące (w oparciu o ustawienia 5px):

W Firefoksie:

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

W Webkit (testowane w Chrome & Safari):

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

Answer 2

W Firefoksie przynajmniej czytanie z $('#foo').css('MozBorderRadius') prac. $('#foo').css('-moz-border-radius') nie działa, nawet jeśli działa podczas ustawiania wartości.

Answer 3

Poprzednie odpowiedzi nie działały dla mnie.

Poniższy kod działa dla mnie w przeglądarkach Firefox i Chrome, a także zapewnia promień obramowania dla każdego rogu - ale tylko dla elementu z identyfikatorem. Nie ma jQuery.

Więcej informacji 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>