www.webdeveloper.com
Results 1 to 6 of 6

Thread: Change Border Color of a HTML Control to its Default

  1. #1
    Join Date
    Aug 2010
    Posts
    33

    Change Border Color of a HTML Control to its Default

    What value should I use to change the border of an element back to its default? I tried 'null' and 'undefined' to no avail. When I inserted window.alert(targetControl.borderColor); it returned 'undefined' as the value.

    function highlightControl(ctl, mode) {
    var targetControl = document.getElementById(ctl);
    if (mode == "on") {
    targetControl.style.borderColor = "red";
    }
    if (mode == "off") {
    targetControl.style.borderColor = null;
    }
    }

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    What do you mean by default(FYI: I'm assuming you don't mean the browser default of black)?

    Please elaborate.

  3. #3
    Join Date
    Nov 2010
    Posts
    1,082
    It's worth noting that javascript cannot read a style that has been set in css. It can read an inline style or a style set by javascript, or it can read the computed style. But of course IE handles computed style differently to everybody else so you need a workaround. Here's a good explanation

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927
    // Pass the empty string

    function highlightControl(ctl, mode){
    document.getElementById(ctl).style.borderColor= mode== 'on'? 'red':'';
    }

  5. #5
    Join Date
    Sep 2012
    Posts
    3
    yes, as mrhoo said // Pass the empty string

    you can get that value if you just ask about.
    using alert('['+targetControl.style.borderColor+']'); in your code which will return by the defaul [] an empty string.

    so your code will be

    function highlightControl(ctl, mode) {
    var targetControl = document.getElementById(ctl);
    if (mode == "on") {
    targetControl.style.borderColor = "red";
    }
    if (mode == "off") {
    targetControl.style.borderColor = ""; // instead of using null value

    }
    }

    good luck.

  6. #6
    Join Date
    Mar 2011
    Location
    Rome, Italy
    Posts
    98

    Lightbulb

    "null" value isn't good for borders;

    you can try to assign a "transparent" value to remove border's color :


    <... border style="color:transparent" ...> <!-- HTML -->


    ... element.style.borderColor='transparent' // Javascript

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles