JavaScript (Spartan) Property Toggler

Troy,

Reuse of e.b can cause cross-talk with multiple uses on the same element.

Try this fiddle.

Airshow

Troy,

Reuse of e.b can cause cross-talk with multiple uses on the same element.

Try this fiddle.

Airshow

I should have mentioned that the "spartan toggle" is a single purpose switch.

A definition of a toggle is a two-state util (button) with a single (hardwired) purpose.
A two-state dedicated single-purpose util.

Switch: [purpose] // purpose = [power]
State: ON/FF

Once dedicated to [power] it gets hardwired to becoming an exclusive two-state power switch. Shouldn't be able to use the same button to switch audio[on:off] with it, and it cannot have more than two states.

Therefore if the switch purpose is a given it will become a color-switcher explicit; The color becomes the purpose of the switch. Where the off status is not a new mode, the Off mode is simply off, where off is an existing/default/unaffected state of the thing.
This is why you should be able to switch between modes, but not between purposes of the same element; [it can be used as a weak security feature too; meaning, the external script will not be able to modify the purpose of the switch with ease].

coming back from fiddle...
I notice that you've been trying to use the toggle as a hover utility also. But there's a problem with the approach, besides using the wrong tool for the job you have a three-state hover subject.
I haven't seen a three-state hover element either, a hover element has its initial and hovered property. There's no purpose in having an initial black element which turns blue on hover-in but red on hover-out and stays that way.
So to make it simple, although the spartan toggle was not meant to be used on sub-properties even though the example given is demonstrating its limits and doing exactly that, and especially not as hover utility, if properly applied it can be used to some extent as a 'normal' hover two-state utility too.

I remember the headache with hover functions in their debut times, !the hover default property needs to be set on style element in order to work.

/*
csss
#toggler{color:#09f}
for html
<div id="toggler">Script call for toggler</div>​
*/
toggleProp=
    /*b.b Troy III p.a.e*/
    function(e,p,v){
        e[p]==v ? e[p]=e.b : (e.b=e[p],e[p]=v);
    };

	var t = document.getElementById('toggler');
	t.setAttribute('onclick', 'toggleProp(this.style, "backgroundColor", "red")');
	t.setAttribute('onmouseover', 'toggleProp(this.style, "color", "green")');  
	t.setAttribute('onmouseout',  'toggleProp(this.style, "color", "green")');

Having a toggler at hand, brings up the idea of an event named "onhover" so that the redundant code like:
t.setAttribute('onmouseover', 'toggleProp(this.style, "color", "green")'); t.setAttribute('onmouseout', 'toggleProp(this.style, "color", "green")')
could be merged into a single line expression as in:
t.setAttribute('onhover', 'toggleProp(this.style, "color", "green")');

Dual purpose switch achieved but the coder should keep in mind a precaution that the initial property of the switch should be defined on the style element.

Troy, the fiddle was totally contrived just to demonstrate that e.b could be fooled.

As I put the fiddle together, I wondered if e.b could be initialised as a namespace (ie. a native javascript object), in which you could store one value per CSS property.

It will look something like this:

function(e,p,v){
        if(!e.b) { e.b = {}; }
        e[p]==v ? e[p]=e.b[p] : (e.b[p]=e[p],e[p]=v);
    };

I've not tested this and it may not work because element.style.b = {} is probably illegal. But you should be able to work with a property of the element itself rather than element.style . With HTML5, you could use a "data-" property.

If this could be made to work, then you would have the means to toggle as many CSS properties as you want, independently.

Airshow

Troy, the fiddle was totally contrived just to demonstrate that e.b could be fooled.

As I put the fiddle together, I wondered if e.b could be initialised as a namespace (ie. a native javascript object), in which you could store one value per CSS property.

It will look something like this:

function(e,p,v){
        if(!e.b) { e.b = {}; }
        e[p]==v ? e[p]=e.b[p] : (e.b[p]=e[p],e[p]=v);
    };

I've not tested this and it may not work because element.style.b = {} is probably illegal. But you should be able to work with a property of the element itself rather than element.style . With HTML5, you could use a "data-" property.

If this could be made to work, then you would have the means to toggle as many CSS properties as you want, independently.

Airshow

Of course, introducing a relay-object will allow more wires to be added to the switch.

decriptive form:

toggleXprop=
	function(owner, property, value) {
		owner.mneme||(owner.mneme={});
		owner[property]==value?
		owner[property] = owner.mneme[property]:
		(owner.mneme[property]=owner[property], owner[property]=value);
	}

lib. ver.:

toggleXprop=
	function(o,p,v){
		o.m||(o.m={});
		o[p]==v?o[p]=o.m[p]:(o.m[p]=o[p],o[p]=v);
	}

*Interestingly - we came up with exactly the same line of code in the main.
Anyway, this is a/the second grade function..., and only a half way there. Practice will reveal the third and final demand for completion.

But I still don't understand why would you use toggle for a hover effect?!

Looks good.

But I still don't understand why would you use toggle for a hover effect?!

Pure lack of imagination :-/

Airshow