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.
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.
Share Improve this question edited May 29, 2012 at 17:37 user1106925 asked May 29, 2012 at 16:22 WK_of_AngmarWK_of_Angmar 3152 gold badges4 silver badges8 bronze badges 4- could you check this please? alert(articleparent.style.borderRadius); – Sebas Commented May 29, 2012 at 16:24
- @Sebas I get no value. Does this mean that I've not referenced the right element? – WK_of_Angmar Commented May 29, 2012 at 16:30
- If my interpretation of the CSS is correct, it looks like the div.placeholder is getting the border radius styling not, it's parent div#mainbody... this could be why – pandavenger Commented May 29, 2012 at 17:00
- Are you sure? According to my browser's element inspector, div.placeholder has the style. And CSS applies to the last element in the list. – WK_of_Angmar Commented May 29, 2012 at 17:04
2 Answers
Reset to default 12For 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');
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"));