Manipulating CSS class

[Timo Nentwig]

Hi!

I want to directly manipulate a CSS class:

#bla
{
property: 123;
}

<span id="bla">foo</span>
<span id="bla">bar</span>

Both spans shall change when doing something like:

bla.property=321
Is this possible?

Timo

[Michael Winter]

On Fri, 09 Apr 2004 19:54:03 +0200, Timo Nentwig <tc*@spamgourmet.org>
wrote:

I want to directly manipulate a CSS class:

#bla
{
property: 123;
}
That's actually a CSS declaration block which uses an ID selector. There's
nothing relating to classes there.
<span id="bla">foo</span>
<span id="bla">bar</span>
That's invalid HTML. The id attribute is supposed to uniquely identify an
element thoughout the entire document. You cannot do that if two values
are the same. What you're trying to do would be better acheived with:

<span class="bla">foo</span>
<span class="bla">bar</span>
Both spans shall change when doing something like:

bla.property=321

Is this possible?

In some browsers, yes. It requires support for the document.styleSheets
property. From there, you can find the style sheet that contains the
declaration and modify it.

function modifyRule( selector, property, value )
{
if( document.styleSheets )
{
var sS = document.styleSheets, s = null;

for( var i = 0, n = sS.length; i < n; ++i )
{
if(( s = sS[ i ]) && !s.disabled && s.cssRules )
{
var cR = s.cssRules, d;

for( var j = 0, m = cR.length; j < m; ++j )
{
if(( 1 == cR[ j ].type ) &&
( selector == cR[ j ].selectorText ) &&
( d = cR[ j ].style ))
{
if( d.getPropertyValue && d.setProperty &&
( null != d.getPropertyValue( property ))
{
d.setProperty( property, value, '' );
return true;
}
}
}
}
}
}
return false;
}

The function above is untested, but it should work in theory. If the
property value was set, the function will return true. If the function
fails, for any reason, it will return false.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)