jquery - 如何使用 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"); 将起作用(显然不过只返回一个 Angular 的设置)。

---

编辑:

作为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"