I attempted to identify browsers that do not support border-radius with % values by using the code below. However, it seems like the code is not functioning correctly as I am only getting an empty alert box.
function checkStyle(element, styleProp){
var ele = document.getElementById(element);
if(ele.currentStyle){
var value = ele.currentStyle[styleProp];
}else if(window.getComputedStyle){
var value = document.defaultView.getComputedStyle(ele,null).getPropertyValue(styleProp);
}
return value;
}
$('body').append('<div id="detect"></div>');
var borderStyle = checkStyle('detect','-webkit-border-radius');
alert(borderStyle);
The code was sourced from here.
This method works well for background-color, height & width, but falls short for padding, margin, and border-radius properties, returning empty values.
Any insights into why this limitation exists?