1 reply [Last post]
djjekill
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-08-16
Posts: 1
Points: 0

I have problems to dynamically change the style of some objects in a form. I want to change the border color of a textarea when there's an error. It seems that the i cannot change the properties of the CSSStyleDeclaration object with the Safari browser. The code works well with IE or Mozilla.
Here's the code :
var fieldState; // used to memorize the previous status of form fields

function Memento()
{
this.bordertop = null;
this.borderbottom = null;
this.borderleft = null;
this.borderright = null;
this.borderstyle = null;
this.color = null;
}

/**
* Changes the border colors for a given form field, according to its error state
* @param
*/
function changeFormFieldLook(aFormFieldId, anErrorStatus, aFormField)
{
//alert("changeFormFieldLook(" + aFormFieldId + ", " + anErrorStatus + ") \naFormField.type=" + aFormField.type);
if(!fieldState)
{
fieldState = new Array();
}
if(!aFormField)
{
aFormField = document.getElementById(aFormFieldId);
}
switch(aFormField.type)
{
case "text":
case "textarea":
case "password":
case "file":
var styleObject = aFormField.style;
if(!fieldState[aFormFieldId])
{
fieldState[aFormFieldId] = new Memento();

fieldState[aFormFieldId].bordertop = styleObject.borderTopColor;
fieldState[aFormFieldId].borderbottom = styleObject.borderBottomColor;
fieldState[aFormFieldId].borderleft = styleObject.borderLeftColor;
fieldState[aFormFieldId].borderright = styleObject.borderRightColor;
fieldState[aFormFieldId].borderstyle = styleObject.borderStyle;
fieldState[aFormFieldId].color = styleObject.color;
fieldState[aFormFieldId].cssText = styleObject.cssText;
}
if(anErrorStatus)
{
styleObject.borderColor = "red";
styleObject.borderStyle = "solid";
styleObject.color = "red";
}
else
{
styleObject.borderTopColor = fieldState[aFormFieldId].bordertop;
styleObject.borderBottomColor = fieldState[aFormFieldId].borderbottom;
styleObject.borderLeftColor = fieldState[aFormFieldId].borderleft;
styleObject.borderRightColor = fieldState[aFormFieldId].borderright;
styleObject.borderStyle = fieldState[aFormFieldId].borderstyle;
styleObject.color = fieldState[aFormFieldId].color;
styleObject.cssText = fieldState[aFormFieldId].cssText;
}
break;
default:
break;
}
}

I tried to change the style with the setProperty function but I cannot see visible changes on the screen.

Can you help me to solve my pb ?

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

problem to change css object in javascript with safari 1.2

Alteration of form elements in Safari is limited, limited to zero to be precise (well, you can change padding and margins on elements, but that's about it).

So, I am guessing you are at the mercy of Apple's intentions (they want every user to see their lovely OS X form elements).

The next sentence is true. The previous sentence is false. Discuss...