如何使用 jQuery 从元素中获取边界半径？

Question

我有一个 div，包含以下 HTML 和 CSS。为了使我的 Javascript 代码更健壮，我试图从所选元素中检索某些 CSS 属性。

我知道如何使用 .css() getter 获取元素，但是如何使用该方法获取边界半径？

jQuery 的文档很少。

HTML：

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

CSS：

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

Answer 1

我猜它还没有得到官方支持，因为它有点不可预测......在 Firefox 中使用$("#somediv").css("-moz-border-radius", "20px"); 将设置边界半径很好，但尝试通过$("#somediv").css("-moz-border-radius"); 读取它会返回一个空字符串......然而，Firefox 似乎将边框半径分解为其组成部分，这意味着$("#somediv").css("-moz-border-radius-topleft"); 将起作用（但显然只返回一个角的设置）。

---

编辑：

Tgr points out $('#foo').css('MozBorderRadius') 会让你在 Firefox 中通用地读回它。正如 Bradley Mountford 在下面的评论中指出的那样，您似乎也可以使用组件部分从 Webkit 中读取信息（尽管似乎只有 chrome 喜欢 border-top-left-radius，而 Chrome 和 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"

Answer 2

至少在 Firefox 中，使用$('#foo').css('MozBorderRadius') 阅读是有效的。 $('#foo').css('-moz-border-radius') 没有，即使它在设置值时起作用。

Answer 3

以前的答案对我不起作用。

下面的代码在 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>