如何從使用jQuery的元素獲取邊框半徑？

我有一個div，下面的HTML和CSS。爲了使我的Javascript代碼更健壯，我試圖從選定的元素中檢索某些CSS屬性。如何從使用jQuery的元素獲取邊框半徑？

我知道如何使用.css（）getter獲取元素，但是如何使用該方法獲取邊界半徑？

jQuery的文檔很稀疏。

HTML：

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

CSS：

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

來源

2010-05-24 S Pangborn

你能得到任何CSS屬性的樣式表，而不是由樣式屬性，或通過jQuery的設置這樣設置？ – mVChr 2010-05-24 22:54:50

+1偉大的問題。在jsFiddle中測試時學會了噸。 – 2010-05-24 23:17:35

我猜它不正式支持但因爲它使用$("#somediv").css("-moz-border-radius", "20px");將設置邊框半徑精細有點難以預料......在Firefox中，但試圖通過$("#somediv").css("-moz-border-radius");讀回它返回一個空字符串......但是，Firefox似乎將邊界半徑分解爲其組成部分，意思是$("#somediv").css("-moz-border-radius-topleft");將起作用（顯然只會返回一個角落的設置雖然）。

編輯：

如Tgr points out$('#foo').css('MozBorderRadius')將讓你在Firefox中讀回一般。正如布拉德利芒福德在下面評論所指出的，它看起來像你可以使用WebKit的組成部分也讀（雖然只有鉻似乎很喜歡border-top-left-radius，其中既鉻& Safari瀏覽器處理-webkit-border-top-left-radius ...

所以總結，您會收到以下（根據您的5px設置）：

在Firefox：

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

在Webkit中（測試在Chrome & Safari瀏覽器）：

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

來源

2010-05-24 23:03:30 Alconja

我可以證實這一點。看起來它只能在計算後返回分解爲其組成部分的半徑。所以-webkit-border-radius變成了'border-bottom-left-radius'，'border-top-left-radius'，'border-bottom-right-radius'和'border-right-right-radius'。請注意，在我看到這個答案之前，我只能在Chrome中進行測試。 – 2010-05-24 23:15:27

@Bradley - 很好看。儘管它看起來只能在Chrome中使用。 '-webkit-border-left-left-radius'似乎可以在Safari和Chrome中運行。 – Alconja 2010-05-24 23:33:08

良好的通話。這是一個非常豐富的問題。 – 2010-05-25 00:35:31

在Firefox至少，讀取與$('#foo').css('MozBorderRadius')作品。 $('#foo').css('-moz-border-radius')不會，即使它在設置值時工作。

來源

2010-05-24 23:06:21 Tgr

+1所以它......我可以發誓我試過了。 :) – Alconja 2010-05-24 23:10:27

謝謝，優秀的答案。希望我可以選擇兩個。 ;） – 2010-05-25 18:02:59

以前的答案不適合我。

下面的代碼在Firefox和Chrome中適用於我，並且會爲每個角提供邊界半徑 - 但僅限於具有ID的元素。儘管沒有jQuery。

更多信息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>

來源

2015-07-29 17:17:44 karsin

如何從使用jQuery的元素獲取邊框半徑？

回答

相關問題