Geek Answers Handbook

JQuery does not extract border radius in firefox

I have a div that has a border radius. I am trying to get the border radius using jQuery. It works everywhere except firefox.

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 ("")

I tried to do what was instructed on the next stackoverflow page: How to get border radius from an element using jQuery? since they had the same problem. However nothing worked

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

and

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

returned undefined

+4
source share
2 answers

, , , , :

  • CSS .
  • .
  • " " , .

, , " " "-moz-border-radius" , firefox 26.0

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

, : jQuery CSS-, - ?, CSS div:

http://prntscr.com/6dcurt

, , , :

'borderBottomLeftRadius' 'BorderBottomRightRadius' 'BorderTopRightRadius' 'BorderTopLeftRadius'

http://prntscr.com/6dcv90

, , , 4 , , , "border radius" Chrome, , , $('#div').css('border-radius'); 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"));

( , , , border-radius, 4 ).

, .

+2

, :

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

// returns 5px

DEMO

, PX, parseInt():

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

// returns 5
+1

More articles:


All Articles