css in javascript important not working

Question

I am trying to change the border color of any control in my page using javascript . The color change but then returns back to the original color . first i tried :

control.style.border = "solid 1px red";

then I tried :

control.attr('style', 'border : solid 1px red  ');

also :

addStyleAttribute(control, 'border : solid 1px red  !important');

finally :

 var all = document.styleSheets,
 s = all[all.length - 1],
 l = s.cssRules.length;
 if (s.insertRule) {
 s.insertRule('#' + control.id+ ' {border: solid 1px red !important }', l);
 }

all of the above didnt work

any help ?

Answer 1

on submitting the page the color changes for a few seconds but then 'disappear'

You are changing the page, then submitting the form, then a new page loads, and the change you made to the old page is not in the new page.

You'll need to make the change in the new page too. Typically you'll want to do this by using server side code in your form handler.