Entry
Can I change the style class of an HTML element in NN4?
Oct 22nd, 2000 08:39
Martin Honnen, Dave Pedowitz,
No. While IE4+ and NN6 allow to dynamically script the HTML CLASS
attribute as
elementReference.className = 'whatever'
NN4 doesn't allow you to alter the style class.
All you can do is have a positioned element with some inner content to
which you apply a style class and then you can rewrite the inner
content with a new style class. Example:
<HTML>
<HEAD>
<TITLE>
</TITLE>
<STYLE>
.class1 {
background-color: orange;
color: white;
}
.class2 {
background-color: white;
color: orange;
}
#anElement {
position: absolute;
}
</STYLE>
<SCRIPT>
function rewriteContentWithStyle (id, html, className) {
var l = document[id];
var cont = '';
cont += '<SPAN';
cont += className ? ' CLASS="' + className + '"' : '';
cont += '>';
cont += html;
cont += '<\/SPAN>';
l.document.open();
l.document.write(cont);
l.document.close();
}
function init () {
if (document.layers) {
var l = document.anElement;
l.onmouseover = function (evt) {
rewriteContentWithStyle
(this.id, 'JavaScript.FAQTs.com', 'class2');
}
l.onmouseout = function (evt) {
rewriteContentWithStyle
(this.id, 'JavaScript.FAQTs.com', 'class1');
}
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()">
<SPAN ID="anElement" CLASS="class1"
ONMOUSEOVER="this.className = 'class2'"
ONMOUSEOUT="this.className = 'class1'"
>
JavaScript.FAQTs.com
</SPAN>
</BODY>
</HTML>
Here is also a more complex example which shows how to change the style
of an element not with a mouseover of the same element but from another
element:
<HTML>
<HEAD>
<TITLE>
</TITLE>
<STYLE>
.orange { color: orange; background-color: white; }
.white { color: white; background-color: orange; }
.lime { color: lime; background-color: black; }
.black { color: black; background-color: lime; }
.yellow { text-decoration: none; font-size: 18pt; color: yellow;
background-color: blue; }
.blue { text-decoration: none; font-size: 24pt; color: blue;
background-color: yellow; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2">
if (document.layers) {
var html = '';
html += '<STYLE>';
html += '.rewritable { position: absolute; }';
html += '.placeHolder { position: relative; visibility: hidden; }';
html += '<\/STYLE>\n';
document.write(html);
}
function CSSClassElement (content, className, block) {
this.content = content;
this.className = className || '';
this.block = block ? true : false;
this.id = CSSClassElements.length;
this.elementID = 'CSSClassElement' + this.id;
CSSClassElements[CSSClassElements.length] = this;
this.writeElement();
}
function CSSClassElement_writeElement () {
var html = '';
if (document.layers) {
html +=
this.block ?
'<DIV ID="' + this.elementID + '"' :
'<SPAN ID="' + this.elementID + '"';
html += ' CLASS="rewritable"';
html += '>';
html += '<SPAN ';
html += this.createClassStyle();
html += '>';
html += this.content;
html += '<\/SPAN>';
html += this.block ? '<\/DIV>' : '<\/SPAN>';
html +=
this.block ?
'<DIV' :
'<SPAN';
html += ' CLASS="placeholder"';
html += '>';
html += '<SPAN ';
html += this.createClassStyle();
html += '>';
html += this.content;
html += '<\/SPAN>';
html += this.block ? '<\/DIV>' : '<\/SPAN>';
}
else if (this.block) {
html += '<DIV ID="' + this.elementID + '"';
html += this.createClassStyle();
html += '>';
html += this.content;
html += '<\/DIV>';
}
else {
html += '<SPAN ID="' + this.elementID + '"';
html += this.createClassStyle();
html += '>';
html += this.content;
html += '<\/SPAN>';
}
document.write(html);
}
CSSClassElement.prototype.writeElement = CSSClassElement_writeElement;
function CSSClassElement_createClassStyle () {
return this.className ? ' CLASS="' + this.className + '"' : '';
}
CSSClassElement.prototype.createClassStyle =
CSSClassElement_createClassStyle;
function CSSClassElement_setStyleClass (className) {
this.className = className;
if (document.layers) {
if (!this.layer)
this.layer = document[this.elementID];
var html = '';
html += '<SPAN ';
html += this.createClassStyle();
html += '>';
html += this.content;
html += '<\/SPAN>';
this.layer.document.open();
this.layer.document.write(html);
this.layer.document.close();
}
else
if (!this.layer)
this.layer = document.all ? document.all[this.elementID] :
document.getElementById(this.elementID);
this.layer.className = className;
}
CSSClassElement.prototype.setStyleClass = CSSClassElement_setStyleClass;
CSSClassElements = new Array();
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: void 0"
ONMOUSEOVER="element1.setStyleClass('white');"
ONMOUSEOUT="element1.setStyleClass('orange');"
>
mouse here:</A>
<SCRIPT>
var element1 = new CSSClassElement('JavaScript.FAQTs.com', 'orange');
</SCRIPT>
</BODY>
</HTML>
