Làm cách nào để có được bán kính đường viền từ một phần tử bằng jQuery?

Question

Tôi có một div, với HTML và CSS sau. Trong một nỗ lực để làm cho mã Javascript của tôi mạnh mẽ hơn, tôi đang cố gắng truy xuất một số thuộc tính CSS nhất định từ phần tử đã chọn.

Tôi biết cách sử dụng .css() getter để lấy các phần tử, nhưng cách lấy bán kính đường viền bằng cách sử dụng phương thức đó?

Tài liệu của jQuery rất thưa thớt.

HTML:

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

CSS:

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

Answer 1

Tôi đoán nó không hỗ trợ chính thức được nêu ra như đó là một chút khó lường ... Trong Firefox sử dụng $("#somediv").css("-moz-border-radius", "20px"); sẽ thiết lập tốt bán kính biên giới, nhưng cố gắng đọc lại thông qua $("#somediv").css("-moz-border-radius"); trả về một chuỗi trống ... Tuy nhiên, có vẻ như Firefox phát nổ bán kính đường viền thành các thành phần của nó có nghĩa là $("#somediv").css("-moz-border-radius-topleft"); sẽ hoạt động (rõ ràng chỉ trả về cài đặt một góc Tuy nhiên).

---

Sửa:

Như Tgr points out$('#foo').css('MozBorderRadius') sẽ cho phép bạn đọc nó lại quát trong Firefox. Và như Bradley Mountford chỉ ra trong một chú thích dưới đây, có vẻ như bạn có thể đọc từ Webkit bằng cách sử dụng bộ phận cấu thành quá (mặc dù chỉ có chrome dường như thích border-top-left-radius, nơi như cả Chrome & Safari xử lý -webkit-border-top-left-radius ...

Vì vậy, tóm tắt , bạn nhận được như sau (dựa trên thiết lập 5px của bạn):

Trong Firefox:

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

Trong Webkit (thử nghiệm trong Chrome & Safari):

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

Answer 2

Trong Firefox ít nhất, đọc với $('#foo').css('MozBorderRadius') hoạt động. $('#foo').css('-moz-border-radius') không, mặc dù nó hoạt động khi thiết lập giá trị.

Answer 3

Các câu trả lời trước đó không phù hợp với tôi.

Mã bên dưới hoạt động cho tôi trong Firefox và Chrome và sẽ cung cấp bán kính đường viền cho mỗi góc - nhưng chỉ cho một phần tử có ID. Mặc dù không có jQuery.

Thông tin thêm 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>