Reset styles?

[Ryan Stewart]

Is there a way to reset the style property of an HTML element to some default or
to all empty values? I have a group of elements whose style settings may be
changed arbitrarily at certain points in a script (maybe set the background
color and font weight of one element and the text align of another), but at
another point I want to undo all of these changes and go back to the original
state (which is actually all empty styles). Is there a way to do this short of
implementing a Command pattern for undos or something?

[ASM]

Ryan Stewart wrote:

Is there a way to reset the style property of an HTML element to some default or
to all empty values? I have a group of elements whose style settings may be
changed arbitrarily at certain points in a script (maybe set the background
color and font weight of one element and the text align of another), but at
another point I want to undo all of these changes and go back to the original
state (which is actually all empty styles). Is there a way to do this short of
implementing a Command pattern for undos or something?

hope that would be ok :

function newStyle(elem,styl,val) {
document.getElementById(elem).style.styl = val; }
function revertStyle(elem,styl) {
document.getElementById(elem).style.styl = ''; }
<input type=button value="foo : yellow back"
onclick="newStyle('foo','backgroundColor','yellow' );">
<input type=button value="foo : revert back"
onclick="newStyle('foo','backgroundColor');">

<input type=button value="foo : green back"
onclick="document.getElementById('foo').style.back groundColor='green';">
<input type=button value="foo : revert back"
onclick="document.getElementById('foo').style.back groundColor='';">

--
Stephane Moriaux et son [moins] vieux Mac

[Ryan Stewart]

"ASM" <st*********************@wanadoo.fr> wrote in message
news:42*********************@news.wanadoo.fr...

Ryan Stewart wrote:

Is there a way to reset the style property of an HTML element to some default
or to all empty values? I have a group of elements whose style settings may
be changed arbitrarily at certain points in a script (maybe set the
background color and font weight of one element and the text align of
another), but at another point I want to undo all of these changes and go
back to the original state (which is actually all empty styles). Is there a
way to do this short of implementing a Command pattern for undos or
something?

hope that would be ok :

function newStyle(elem,styl,val) {
document.getElementById(elem).style.styl = val; }
function revertStyle(elem,styl) {
document.getElementById(elem).style.styl = ''; }
<input type=button value="foo : yellow back"
onclick="newStyle('foo','backgroundColor','yellow' );">
<input type=button value="foo : revert back"
onclick="newStyle('foo','backgroundColor');">

<input type=button value="foo : green back"
onclick="document.getElementById('foo').style.back groundColor='green';">
<input type=button value="foo : revert back"
onclick="document.getElementById('foo').style.back groundColor='';">

Yes, I know how to reset a single style property. The problem is that any or all
or none of them may have been set. What is the best way to get all properties
cleared or back to some initial value?

[RobG]

Ryan Stewart wrote:
[...]

Yes, I know how to reset a single style property. The problem is that any or all
or none of them may have been set. What is the best way to get all properties
cleared or back to some initial value?

Given that a simple 'P' element has 177 properties in Mozilla and 128 in
IE, I think trying to serialise the properties and then re-apply them
later will be way too much effort for most browsers - I have a
reasonably new, medium performance PC and it takes a few seconds to run
the code below. Doing it for multiple elements to serialise all their
properties could be glacial.

You could just store those properties that the user has access to and
restore them.

It also matters how the style is applied - CSS rules, CSS inline or
element properties?

I think the easiest way would be to clone the node and keep a reference
to it in an array. When you want to 'restore' the chosen element,
replace it with a clone of the clone.

You may want to extract some of the style property values of the
modified element and apply them to the replacement node.
<script type="text/javascript">

function showStyle( el ) {
var i=0, s = el.style;
var msg = document.getElementById('msg');
msg.innerHTML = s+'<br>';
for ( prop in s ) {
msg.innerHTML += i++ + '<b>Property: </b>' + prop +
'&nbsp;<i>'+s[prop]+'</i><br>';
}
}
</script>
<input type="button" value="Show style properties" onclick="
showStyle(document.getElementById('msg'));
">
<p id="msg"></p>


--
Rob

[RobG]

RobG wrote:

Ryan Stewart wrote:
[...]
[...]
Given that a simple 'P' element has 177 properties in Mozilla and 128 in
IE, I think trying to serialise the properties and then re-apply them
later will be way too much effort for most browsers - I have a
reasonably new, medium performance PC and it takes a few seconds to run
the code below. Doing it for multiple elements to serialise all their
properties could be glacial.

Sorry, that's crap - the slowness was from using concatenation with
innerHTML. The following version runs in a few milliseconds:

<script type="text/javascript">

function showStyle( el ) {
var t, s = el.style;
t = ['<ol>'];
for ( prop in s ) {
t.push( '<li><b>Property: </b>' + prop +
'&nbsp;<i>'+s[prop]+'</i></li>');
}
t.push('</ol>');
document.getElementById('msg').innerHTML = t.join('');
}

</script>
<input type="button" value="Show style properties" onclick="
showStyle(document.getElementById('msg'));
">
<div id="msg"></div>

[...]

--
Rob

[Ryan Stewart]

"RobG" <rg***@iinet.net.auau> wrote in message
news:uH***************@news.optus.net.au...

RobG wrote:

Given that a simple 'P' element has 177 properties in Mozilla and 128 in IE,
I think trying to serialise the properties and then re-apply them later will
be way too much effort for most browsers - I have a reasonably new, medium
performance PC and it takes a few seconds to run the code below. Doing it
for multiple elements to serialise all their properties could be glacial.

Sorry, that's crap - the slowness was from using concatenation with innerHTML.
The following version runs in a few milliseconds:

[...]
So I take it you would lean toward a simple loop to reset all the style
properties to empty rather than cloning nodes and then replacing with clones?
Setting them to empty will accomplish the desired result as there are no inline
styles but possibly some applied from a stylesheet, which should not be removed.
Any other styles present would have been added by a script, and that's what
needs to go away. As a related question, when clearing a style property, would
you set it to the empty string or to null? I'm not too familiar with the inner
workings of JavaScript in general or the JS CSS model specifically, so I'm not
sure what semantics might be going on here.

[Ryan Stewart]

"RobG" <rg***@iinet.net.auau> wrote in message
news:uH***************@news.optus.net.au...
[...]
Oh, also since you seem to be quite knowledgeable of JS, what do you use for an
official, correct reference guide?

[RobG]

Ryan Stewart wrote:

"RobG" <rg***@iinet.net.auau> wrote in message
news:uH***************@news.optus.net.au...

RobG wrote:

Given that a simple 'P' element has 177 properties in Mozilla and 128 in IE,
I think trying to serialise the properties and then re-apply them later will
be way too much effort for most browsers - I have a reasonably new, medium
performance PC and it takes a few seconds to run the code below. Doing it
for multiple elements to serialise all their properties could be glacial.

Sorry, that's crap - the slowness was from using concatenation with innerHTML.
The following version runs in a few milliseconds:

[...]
So I take it you would lean toward a simple loop to reset all the style
properties to empty rather than cloning nodes and then replacing with clones?
Setting them to empty will accomplish the desired result as there are no inline
styles but possibly some applied from a stylesheet, which should not be removed.
Any other styles present would have been added by a script, and that's what
needs to go away. As a related question, when clearing a style property, would
you set it to the empty string or to null? I'm not too familiar with the inner
workings of JavaScript in general or the JS CSS model specifically, so I'm not
sure what semantics might be going on here.

Without knowing what you are doing, I can't advise one way or the other.
Here's some pros & cons, add weight and consider as appropriate:

*Cloning*
Pro
- you only need one clone per set of identical elements. When it's
time to replace a particular instance, clone the clone and replace.
Maybe copy a few properties across before replacement.

- it's very simple and widely supported.

Con
- if you have lots of clones sitting around for no good reason, it's
wasteful of resources.
*Looping*
Pro
- if restricted to just a few properties, then it's simple and quick.

- minimal memory used for storing values if above approach used.

Con
- getting/setting up to 180 properties when maybe only a few need to
be replaced is wasteful

- there are likely many inconsistencies between platforms for
getting/setting values and resolution of how styles are set - CSS
rule, inline style, element attributes, inheritance... ughhh. Note
my post on getting properties and camelCase versus hyphenated
property names (IE vs Mozilla).

- this would get very complex because of the issues noted above -
Mozilla has 3 background color attributes.

- Storing all the values for many elements may consume more resources
that the cloning alternative. This is doubly wasteful if most of
the properties are never used.

So over all, cloning seems to come out on top. Keep a clone of each
element type and use it as a template to make replacements.

--
Rob

[RobG]

Ryan Stewart wrote:

"RobG" <rg***@iinet.net.auau> wrote in message
news:uH***************@news.optus.net.au...
[...]
what do you use for an official, correct reference guide?

For JavaScript, there is only one official, correct reference: the
ECMAScript Language Specification.

For HTML, CSS & DOM, the W3C.

For certain things, Mozilla's web developer pages are pretty good. The
following has links to Mozilla resources and W3C stuff:

<URL:http://www.mozilla.org/docs/web-developer/>

Quirksmode is a wonderful resource, I wish it was more extensive in its
coverage (though it's amazingly comprehensive and thorough for a site
run by one person).

For general JavaScript, this forum is as good a place as any. I often
Google until I find something that seems to do what I want, then search
this group's archives (always sort by date) to find out suggested ways
of doing it.

Post any questions, they'll usually be answered quite quickly.

Good luck! :-)
--
Rob