...

View Full Version : DOM and Border Radius



ubh
01-03-2009, 11:28 AM
So as most of us know CSS3 brings the whole rounded corners controversy to an end with the CSS3 rule "border-radius". But how do I set a elements style with a border radius in DOM?

I mean, normally for things such as background colors you would do the following:


var box = document.getElementById("box");
box.style.backgroundColor="#686868";

but for a border radius how do I turn these into a DOM friendly statement like background color?


-moz-border-radius
-webkit-border-radius

oesxyl
01-04-2009, 12:34 AM
So as most of us know CSS3 brings the whole rounded corners controversy to an end with the CSS3 rule "border-radius". But how do I set a elements style with a border radius in DOM?

I mean, normally for things such as background colors you would do the following:


var box = document.getElementById("box");
box.style.backgroundColor="#686868";

but for a border radius how do I turn these into a DOM friendly statement like background color?


-moz-border-radius
-webkit-border-radius
I'm guessing, :)
- first word is lower case, background-color is backgroundColor
-capitalize the words and remove invalid chars in identifier, -moz-border-radius is MozBorderRadius, first letter is upper because start with -moz, not moz.
in conclusion, is borderRadius?

PS: I'm not sure, I have impression that I read this somewhere

regards

ubh
01-04-2009, 02:17 AM
Oops sorry I left this open ended. Yeah I figured it out last night.


box.style.MozBorderRadius="10px";
box.style.WebkitBorderRadius="10px";

Problem I now have is I can alter the corner radius with DOM and above styles but only for FF and Safari and not IE, even with the help of the www.htmlremix.com .htc file that give the CSS3 border radius ability to all IE versions you cant alter them in IE via DOM.

<- shakes another fist at IE and waits for another year sigh.

rnd me
01-04-2009, 02:39 AM
Oops sorry I left this open ended. Yeah I figured it out last night.


box.style.MozBorderRadius="10px";
box.style.WebkitBorderRadius="10px";

Problem I now have is I can alter the corner radius with DOM and above styles but only for FF and Safari and not IE, even with the help of the www.htmlremix.com .htc file that give the CSS3 border radius ability to all IE versions you cant alter them in IE via DOM.

<- shakes another fist at IE and waits for another year sigh.

i doubt any script will give you the ability to do it in IE.
applying replacement styles for lacking CSS props is one thing, adding capability deep into the DOM is another.

perhaps what the htc would support is doing it via classes. if you could build a px class and a 5px class for example, you can easily toggle the classes on and off. there are add/remove class functions in the snippets link in my signature, and i think itsallkizza has a whole css class going in "post a code".



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum