Jquery没有在firefox中检索边框半径

I have a div that has a border radius. I am trying to retrieve the border-radius using Jquery. It is working everywhere except firefox.

我有一个边界半径的div。我正在尝试使用Jquery检索边界半径。除了火狐以外，其他地方都可以使用。

The file:

文件:

<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') returns an empty string ( "" )

$('#SelectedDiv').css('边框半径')返回空字符串("")

I tried to do what was instructed in the following * page: How do I get the border-radius from an element using jQuery? since they had the same problem. However, nothing worked

我尝试在下面的*页面中执行以下命令:如何使用jQuery从元素中获取边框半径?因为他们也有同样的问题。然而,没有工作

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

and

和

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

returned undefined

返回未定义

2 个解决方案

#1

I've tried some solutions proposed here but they seems to not be working, therefore I've tried this:

我在这里尝试了一些解决方案，但似乎没有效果，所以我尝试了:

Retrieve all the CSS properties directly from a fiddle.
直接从小提琴中检索所有CSS属性。
Check them.
检查他们。
Retrieve the "true names" of the properties I was looking for.
检索我要查找的属性的“真实名称”。

Despite some says that they have "border-radius" and "-moz-border-radius" working, in my case they are not working in firefox 26.0

尽管有些人说他们有“边界半径”和“-莫扎特边界半径”工作，但在我的情况下，他们没有在firefox 26.0工作

-> "MozBorderRadius" : http://prntscr.com/6dcu2z -> "border-radius" : http://prntscr.com/6dcubd

->“MozBorderRadius”:http://prntscr.com/6dcu2z ->“border-radius”:http://prntscr.com/6dcubd

So, I've checked THIS post: jQuery CSS plugin that returns computed style of element to pseudo clone that element? , included it in my fiddle and looked for every single CSS property of the div:

所以，我检查了这篇文章:jQuery CSS插件返回计算样式的元素到伪克隆那个元素?，将它包含在我的小提琴中，并查找div的每个CSS属性:

http://prntscr.com/6dcurt

So, from that, I've found out that you can retrieve the equivalent by using:

因此，我发现你可以通过使用:

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

“borderBottomLeftRadius”“borderBottomRightRadius”“borderTopRightRadius”“borderTopLeftRadius”

http://prntscr.com/6dcv90

What confuses me, though, is that the Object seems to really have only these 4 properties for the border radius, and there seems to be no way to retrieve the "border radius" generic property even in Chrome, despite by using $('#div').css('border-radius'); it does return 30px.

然而，让我困惑的是，这个对象似乎只有这4个边界半径的属性，而且即使是在Chrome中，也没有办法检索“边界半径”通用属性，尽管使用了$('#div').css('边界半径');它返回30 px。

Fiddle:

小提琴:

http://jsfiddle.net/j2zLq357/

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

(I've just logged them, do whatever you want with them, you can rebuild your border-radius property by parsing all the 4 properties).

(我刚刚对它们进行了日志记录，您可以对所有4个属性进行解析，从而重新构建您的border-radius属性)。

Hope this helps.

希望这个有帮助。

#2

This seems to work for me:

这似乎对我有用:

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

// returns 5px

DEMO

演示

If you want just the number, not PX, use parseInt():

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

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

// returns 5

#1