Check if css property exists with JS

gilgimech · 07-03-2011, 01:10 AM

I'm using ccs3PIE with my site. What I want to do is check if a DOM element has a css property like border-radius and then add a class to it.

The problem I'm having is that I don't know how to check for the css property. I've been searching for it for a couple of hours now and I can't find anything that seems to work.

Any ideas?

devnull69 · 07-03-2011, 08:47 AM

You can do two things, with specific drawbacks

1. There are the methods getComputedStyle/getPropertyValue. Together they will tell you the current value of a specific CSS property.

Code:

window.getComputedStyle(element, null).getPropertyValue('border-radius');

BUT: It will always give you a result. This is because all of the CSS properties will have values even if they have not been set explicitly. So you can't tell the difference between border-radius 0 that has been set deliberately and border-radius 0 that has been set by default

2. Each element will expose its style attribute/property. So if the border-radius has been set using style="border-radius: ...." in HTML, this will give you the value

Code:

var myValue = element.style.borderRadius;

BUT: It will only work for inline HTML style attributes