changing style using javascript

mattastic · September 20th, 2004, 08:57 AM

Hi,

I'm having a problem changing the style of a form element, I've used the following script to validate the field on submit, and I want the element to be highlighted with a border if blank.

However it does not work, can anybody help?

-----------------------
if (document.personalDetails.surname.value == "")
    {
        alert("Enter a Surname");
        document.personalDetails.surname.style.border = "3px solid ##FF0000";
        return false;
    }
---------------------------------------------

joefawcett · September 20th, 2004, 09:24 AM

One hash is enough, probably more than enough but I always use one:

Code:

document.personalDetails.surname.style.border = "3px solid #FF0000";

--

Joe

mattastic · September 21st, 2004, 09:19 AM

Great thanks for that.

Do you know how I could change the style back to its default?

AS I change the style here:

document.personalDetails.surname.style.border = "3px solid ##FF0000";

Do you know how I can set the text area back to how it was, with the default bevel?

Many thanks

joefawcett · September 21st, 2004, 09:57 AM

You can save the setting before changing it:

Code:

oBorderStyle = element.style.border

and then put it back later. This page shows something along those lines, interestingly the order for setting the three properties seems irrelevant.

Code:

<html>
<head>
<title>StyleChange</title>
<script type="text/jscript">
  function showBorder(ElementId)
  {
    var oDiv = document.getElementById(ElementId);
    var oTxt = document.getElementById("txtShowBorder");
    oTxt.value = oDiv.style.border; 
  }

  function setBorder(ElementId, Border)
  {
    var oDiv = document.getElementById(ElementId);
    oDiv.style.border = Border;
  }
</script>
</head>

<body bgcolor="#FFFFFF">
<input type="button" value="Show Border" onclick="showBorder('divBorder');"><input type="text" size="30" id="txtShowBorder"><br><br><br><br>
<input type="button" value="Set Border" onclick="setBorder('divBorder', txtSetBorder.value);"><input type="text" size="30" id="txtSetBorder" value="#dd0000 6px dotted"><br><br>
<div id="divBorder" style="position:relative; border: 3px inset #c0c0c0; height:200px;">Hello there</div>
</body>
</html>

--

Joe