Jquery 没有在 Firefox 中检索边界半径答案

【问题标题】：Jquery is not retrieving border radius in firefoxJquery 没有在 Firefox 中检索边界半径
【发布时间】：2015-05-07 23:40:40
【问题描述】：

我有一个具有边框半径的 div。我正在尝试使用 Jquery 检索边界半径。它在除 Firefox 之外的任何地方都可以使用。

文件：

<html>
<head>
  <script src="resources/jquery/jq.js"></script>
</head>
<style>
   div{
     border-radius:30px;
     background-color:black;
     display:block;
     width:300px;
     height:300px;
   }
 </style>
 <body>
   <div id = "SelectedDiv"></div>
 </body>
</html>

$('#SelectedDiv').css('border-radius') 返回一个空字符串（""）

我尝试按照以下 stackoverflow 页面中的指示进行操作： How do I get the border-radius from an element using jQuery? 因为他们有同样的问题。但是，没有任何效果

$('#SelectedDiv').css("MozBorderRadius");

和

$('#SelectedDiv').css("-moz-border-radius-topleft");

返回未定义

【问题讨论】：

你需要在顶部和左右使用边框半径吗？
Firefox 的计算方式不同，您需要专门检查每个角落，例如：$('#SelectedDiv').css("borderBottomLeftRadius") 等...也就是说，您最好解释一下为什么需要检索计算特定元素的边界半径？也许这是一个 XY 问题
这只是一个测试。所以，试试 $('#SelectedDiv')[0].style.borderRadius
@LShetty 不，这会返回空字符串，FF 会为每个角独立计算边界半径。请不要问我为什么？！ ;) 因为我真的不知道......我的意思是我猜为什么但仍然不知道为什么 borderRadius 属性没有填充 30px 30px 30px 30px

标签： javascript jquery html css

【解决方案1】：

我尝试了这里提出的一些解决方案，但它们似乎不起作用，因此我尝试了这个：

直接从小提琴中检索所有 CSS 属性。
检查它们。
检索我正在寻找的属性的“真实名称”。

尽管有人说他们有“border-radius”和“-moz-border-radius”工作，但就我而言，他们在 Firefox 26.0 中没有工作

-> "MozBorderRadius" : http://prntscr.com/6dcu2z -> “边界半径”：http://prntscr.com/6dcubd

所以，我检查了这篇文章：jQuery CSS plugin that returns computed style of element to pseudo clone that element?，将它包含在我的小提琴中并查找了 div 的每一个 CSS 属性：

http://prntscr.com/6dcurt

因此，我发现您可以使用以下方法检索等价物：

'borderBottomLeftRadius' 'borderBottomRightRadius' 'borderTopRightRadius' 'borderTopLeftRadius'

http://prntscr.com/6dcv90

然而，让我感到困惑的是，对象似乎真的只有这 4 个边界半径属性，而且即使在 Chrome 中似乎也无法检索“边界半径”通用属性，尽管使用了 @ 987654327@ 它确实返回 30px。

小提琴：

http://jsfiddle.net/j2zLq357/

console.log($('#SelectedDiv').css("borderBottomLeftRadius"));
console.log($('#SelectedDiv').css("borderBottomRightRadius")); 
console.log($('#SelectedDiv').css("borderTopLeftRadius")); 
console.log($('#SelectedDiv').css("borderTopRightRadius"));

（我刚刚记录了它们，对它们做任何你想做的事，你可以通过解析所有 4 个属性来重建你的border-radius 属性）。

希望这会有所帮助。

【讨论】：

【解决方案2】：

这似乎对我有用：

var radius = $('.my-element').css("borderTopLeftRadius");

// returns 5px

DEMO

如果您只想要数字而不是 PX，请使用 parseInt()：

var radius = parseInt($('.my-element').css("borderTopLeftRadius"),10)

// returns 5

【讨论】：