CODEWITHSUNDEEP
javascriptcss
WK_of_Angmar
WK_of_Angmar

Reputation: 315

Why won't .getPropertyValue() return a value for the "borderRadius" property?

Here is the function:

function lastmenuborder() {
    var articleparent = document.getElementById('article').parentNode;
    var articlestyle = window.getComputedStyle(articleparent,null).getPropertyValue('borderRadius');
    alert (articlestyle);
}

I get no value, yet the css for the parent node is:

div#mainbody div.placeholder {
    border-radius: 3px;
}

What would I have to change to return "3px"? All help greatly appreciated; I am still a newb at JavaScript.

Upvotes: 7

Views: 14862

Answers (2)

GianFS
GianFS

Reputation: 2605

getComputedStyle is not supported on IE8 below, to fix this use:

if (!window.getComputedStyle) {
       window.getComputedStyle = function(el, pseudo) {
           this.el = el;
               this.getPropertyValue = function(prop) {
               var re = /(\-([a-z]){1})/g;
               if (prop == 'float') prop = 'styleFloat';
               if (re.test(prop)) {
                   prop = prop.replace(re, function () {
                       return arguments[2].toUpperCase();
                   });
               }
               return el.currentStyle[prop] ? el.currentStyle[prop] : null;
           }
           return this;
       }
   }

var elem = window.getComputedStyle(document.getElementById('test'), "");
alert(elem.getPropertyValue("borderRadius"));

Upvotes: 0

user1106925
user1106925

Reputation:

For getPropertyValue(), you use hyphens instead of camelCase.

This works in Chrome...

.getPropertyValue('border-radius');

But Firefox seems to require specific corners using this syntax...

.getPropertyValue('border-top-left-radius');

Upvotes: 12

Related Questions