Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    DOM and Border Radius

    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:

    Code:
    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?

    Code:
    -moz-border-radius
    -webkit-border-radius

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ubh View Post
    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:

    Code:
    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?

    Code:
    -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

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Oops sorry I left this open ended. Yeah I figured it out last night.
    Code:
    	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.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by ubh View Post
    Oops sorry I left this open ended. Yeah I figured it out last night.
    Code:
    	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".
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •