Entry
How do I change the content and/or style of an inline element?
Mar 11th, 2000 05:47
Martin Honnen,
This is simple for IE4/5 and NN6 where you can just script every page
element e.g.
<SPAN ID="aSpan">JavaScript.FAQts.com</SPAN>
is just scriptable as
var aSpan =
document.all ? document.all.aSpan // IE4+
: document.getElementById ? document.getElementById('aSpan') // NN6
: null; // no way for other browsers with lack of full DOM access
Then to make style changes you change either the element's
style
object (respectively the properties of the style object) e.g.
aSpan.style.backgroundColor = 'orange';
aSpan.style.color = 'white';
or you set a new style class
aSpan.className = 'styleClassName'
(where you need of course a css STYLE rule e.g.
<STYLE>
.styleClassName { color: white; background-color: orange; }
</STYLE>
).
To change the content with IE4+ you simply set the
innerHTML
property of the element e.g.
aSpan.innerHTML = 'www.FAQts.com';
Check
http://www.faqts.com/knowledge-base/view.phtml/aid/970/fid/128/lang/
and
http://www.faqts.com/knowledge-base/view.phtml/aid/891/fid/128/lang/
on how to do similar with NN6.
NN4 doesn't allow to script an arbritrary page element, and doesn't
allow for dynamic style change. You need to position an element to have
some scripting possibilities with it, namely rewriting its content and
changing position.
So the first idea to get an inline element whose content and/or style
can be changed is to set up a relatively positioned SPAN
<STYLE>
.relative { position: relative; }
</STYLE>
<SPAN ID="aSpan" CLASS="relative">JavaScript.FAQts.com</SPAN>
and then trying to rewrite that element.
Unfortunately the documented approach to rewrite relatively positioned
elements with NN4 fails but
http://www.faqts.com/knowledge-base/view.phtml/aid/867/fid/128/lang/
has a workaround.
The workaround has one shortcoming (which is an advantage depening on
the content you apply it in): as there is no reflow of content possible
with NN4 the workaround assumes that the new content to rewrite is not
longer as the original content and otherwise clips the new content to
fit into the box the original content defined. If it didn't clip the
new content it would just overlay other content around which wouldn't
look well.
You might however want to have a single line of content into which you
want to dynamically insert content of different length. If you make the
whole line a positioned element you can rewrite it. The following tries
to provide some convenient object
RewritableElement
to faciliate that. Examples are included:
<HTML>
<HEAD>
<STYLE>
.normal { color: black; background-color: white; }
.gray { color: gray; background-color: white; }
.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 RewritableElement (content, id, className) {
this.id = RewritableElement.cnt++;
RewritableElement.elements[this.id] = this;
this.layerId = id;
this.content = content;
this.className = className || '';
this.writeElement();
}
function RewritableElement_writeElement () {
var html = '';
if (document.layers) {
html += '<SPAN ID="' + this.layerId + '" CLASS="rewritable">';
html += this.getContent();
html += '<\/SPAN>';
html += '<SPAN ID="' + this.layerId + 'Rel" CLASS="placeHolder">';
html += this.getContent();
html += '<\/SPAN>';
}
else {
html += '<SPAN ID="' + this.layerId + '">';
html += this.getContent();
html += '<\/SPAN>';
}
document.write(html);
}
RewritableElement.prototype.writeElement =
RewritableElement_writeElement;
function RewritableElement_rewrite (content, className) {
if (className)
this.className = className;
this.content = content;
var html = this.getContent();
if (document.layers) {
var l = this.layer;
l.document.open();
l.document.write(html);
l.document.close();
}
else if (document.all) {
document.all[this.layerId].innerHTML = html;
}
else if (document.getElementById) {
var l = document.getElementById(this.layerId);
while (l.hasChildNodes())
l.removeChild(l.lastChild);
var range = document.createRange();
range.setStartAfter(l);
var docFrag = range.createContextualFragment(html);
l.appendChild(docFrag);
}
}
RewritableElement.prototype.rewrite = RewritableElement_rewrite;
function RewritableElement_init () {
var l = this.layer = document[this.layerId];
l.RewritableElement = this;
}
RewritableElement.prototype.init = RewritableElement_init;
function RewritableElement_getContent () {
var html = '';
html += '<SPAN';
html += this.className ? ' CLASS="' + this.className + '"' : '';
html += '>';
html += this.content;
html += '<\/SPAN>';
return html;
}
RewritableElement.prototype.getContent = RewritableElement_getContent;
RewritableElement.cnt = 0;
RewritableElement.elements = new Array();
RewritableElement.init = function () {
if (document.layers)
for (var l = 0; l < RewritableElement.elements.length; l++)
RewritableElement.elements[l].init();
}
</SCRIPT>
<SCRIPT>
function init() {
RewritableElement.init();
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<A HREF="javascript:
layer1.rewrite(
'<SPAN CLASS=\'normal\'>Look here:<\/SPAN>' +
'Welcome at JavaScript.FAQts.com. Hope you enjoy.',
'white');
void 0"
>
insert JavaScript.FAQts.com
</A>
|
<A HREF="javascript:
layer1.rewrite(
'<SPAN CLASS=\'normal\'>Look here:<\/SPAN>' +
'Welcome at www.FAQts.com. Hope you enjoy.',
'gray');
void 0"
>
insert www.FAQts.com
</A>
<BR>
<SCRIPT>
var layer1 = new RewritableElement(
'<SPAN CLASS="normal">Look here:<\/SPAN>' +
'Welcome at www.FAQts.com. Hope you enjoy.',
'layer1', 'gray');
</SCRIPT>
<BR>
<A HREF="javascript:
layer2.rewrite(
'All for Kibology. All for Kibology. All for Scriptology.');
void 0"
>
insert All for Kibology</A>
|
<A HREF="javascript:
layer2.rewrite(
'All for Kibology. Kibology for all. All for Scriptology.');
void 0"
>
insert Kibology for all.
</A>
<BR>
<SCRIPT>
var layer2 = new RewritableElement(
'All for Kibology. Kibology for all. All for Scriptology.',
'layer2', 'blue');
</SCRIPT>
</BODY>
</HTML>
