Forum Moderators: open
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>HTMLHttpRequest Demonstration</title><script type="text/javascript" src="htmlhttprequest.js"></script>
<script type="text/javascript">//<![CDATA[
var docClickLoader = new RemoteFileLoader('docClickLoader');
function loadInto(src, destId, evt)
{
var ok = docClickLoader.loadInto(src.href ¦¦ src.getAttribute('href'), destId);
if (ok) cancelEvent(evt);
};function toggleInto(src, destId, evt)
{
var dest = document.getElementById(destId);
if (!dest.contentLoaded)
{
var ok = docClickLoader.loadInto(src.href ¦¦ src.getAttribute('href'), destId);
if (ok) dest.contentLoaded = true;
}
cancelEvent(evt);
if (!dest.toggleState)
{
src.innerHTML = 'Close: ' + src.innerHTML;
dest.style.display = 'block';
dest.toggleState = 1;
}
else
{
src.innerHTML = src.innerHTML.replace(/^Close: /, '');
dest.style.display = 'none';
dest.toggleState = 0;
}
};addEvent(document, 'click', function(evt)
{
evt = evt ¦¦ window.event;
var src = evt.target ¦¦ evt.srcElement;
if (src.nodeType && src.nodeType!= 1) src = src.parentNode;
while (src)
{
var srcName = (src.nodeName¦¦src.tagName¦¦'').toLowerCase();
if (srcName == 'a' && src.className && src.className.match(/^(load¦toggle)into-(.+)$/))
{
if (RegExp.$1 == 'load') return loadInto(src, RegExp.$2, evt);
if (RegExp.$1 == 'toggle') return toggleInto(src, RegExp.$2, evt);
}
src = src.parentNode;
}
}, 1);//]]></script>
<script>
function changecss(theclass,element,value) {
var cssRules;
if (document.all) {
cssRules = 'rules';
}
else if (document.getElementById) {
cssRules = 'cssRules';
}
for (var S = 0; S < document.styleSheets.length; S++){
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theclass) {
document.styleSheets[S][cssRules][R].style[element] = value;
}
}
}
}
</script><style type="text/css">
.demoLinkList {
list-style: none;
margin: 0;
padding: 0;
}.demoLinkList li {
float: left;
width: 120px;
}.demoLinkList a {
display: block;
padding: 0.5em;
background-color: #8899BB;
color: #FFFFFF;
text-decoration: none;
}.demoLinkList a:hover {
background-color: #CCDDFF;
color: #000000;
}#targetArea, #blindArea {
clear: both;
padding: 0px 15px 0px 15px;
margin-bottom: 2em;
background: #CCDDFF;
height: 250px;
width: 330px;
overflow: auto;
}.loadinto-targetArea {
background-color: red;
}
</style></head>
<body style="font: 0.8em/1.6 sans-serif; background-color: #FFF">
<ul class="demoLinkList">
<li><a class="loadinto-targetArea" href="content/introduction.php" >Introduction</a></li>
<li><a class="loadinto-targetArea" href="content/usage.php">Usage Notes</a></li>
<li><a class="loadinto-targetArea" href="content/advantages.php">Advantages</a></li>
</ul><div id="targetArea">
</div>
</body>
</html>
//
// Change to red
domObject.style.backgroundColor = 'red';
//
// Change back to "default", either transparent, or to the one defined in css
domObject.style.backgroundColor = '';
You can also change the css class of any element, but you have to use the className property then.
But changing the id's of element, I don't think that's a good idea, and besides of my opinion, maybe even not possible. I hardly believe you haven't got a better way to accomplish your task :-)
