nicht angemeldet
gruss apstrakt, hallo Forum,
vor knapp 2 wochen wurde die idee fuer eine funktion
"getElementsByClassName" in diesem forum angestossen
http://forum.de.selfhtml.org/archiv/2002/12/31500/#m170452
und von Thomas Meinike offiziell auf den seiten von
http://www.styleassistant.de umgesetzt -
- zu finden als tipp 100 unter:
http://www.styleassistant.de/tips/tip100.htm
das folgende beispiel greift diesen tipp auf und
erweitert diese funktion um das auffinden eines
klassen-namens bei mehreren fuer ein element
vergebenen klassen - die moeglichkeit des klassen-
tausches wurde ebenfalls fuer diesen fall angepasst;
ausserdem sind die funktionen als methoden des
"document-objects" definiert, so das mit einer
vetrauten (aber laengeren) schreibweise gearbeitet
werden kann:
document.getElementsByClassName([className]);
document.replaceElementsClassNames([className],[newClassName]);
und hier das beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>document.getElementsByClassName()</title>
<script type="text/javascript">
<!--
function docReplaceElementsClassNames(currendClassName,newClassName) {
var elementsArray = document.getElementsByClassName(currendClassName);
// alert(elementsArray.length);
var tempClassName = "";
var regExpression = null;
if (elementsArray.length > 0) {
for (var i=0;i<elementsArray.length;i++) {
// alert(elementsArray[i].className);
if (elementsArray[i].className == currendClassName) {
elementsArray[i].className = newClassName;
} else if (elementsArray[i].className.indexOf(currendClassName) >= 0) {
tempClassName = elementsArray[i].className;
regExpression = new RegExp(newClassName,"g"); // die naechsten drei zeilen sollen verhindern,
tempClassName = tempClassName.replace(regExpression,""); // dass bei mehrfachem klassentausch eine schon
tempClassName = tempClassName.replace(/\s+/g," "); // vorhandene klasse wiederholt zugewiesen wird;
regExpression = new RegExp(currendClassName,"g"); // in den naechsten 6 zeilen
if (regExpression.test(tempClassName)) { // erfolgt der klassentausch:
tempClassName = tempClassName.replace(regExpression,newClassName); //
} else { // - tausch, falls die zu tauschende klasse existiert;
tempClassName += " " + newClassName; //
} // - anhaengen, falls die zu tauschende klasse nicht existiert;
alert("document.replaceElementsClassNames('"+currendClassName+"','"+newClassName+"')\n\ncurrClassName = '"+elementsArray[i].className+"'\nnewClassName = '"+tempClassName+"'");
elementsArray[i].className = tempClassName;
}
}
}
}
// siehe auch tipp 100 auf: http://www.styleassistant.de/tips/tip100.htm
function docGetElementsByClassName(elementClassName) {
// dank an Dr. Thomas Meinike fuer den tip mit der erlaubten wildcart innnerhalb von javascript - document.getElementsByTagName("*");
// -- http://www.styleassistant.de/ - http://www.handmadecode.de/ - http://www.et.fh-merseburg.de/person/meinike/ - www.meinike.de --
var nodesArray = ((document.all) ? (document.all) : ((document.getElementsByTagName) ? (document.getElementsByTagName("*")) : (null)));
var elementsArray = new Array();
if (nodesArray) {
for (var i=0;i<nodesArray.length;i++) {
if (nodesArray[i].className.indexOf(elementClassName) >= 0) { // "erkennt" auch mehrere einem element zugewiesene klassen;
elementsArray[elementsArray.length] = nodesArray[i];
}
}
}
return elementsArray;
}
document.getElementsByClassName = docGetElementsByClassName;
document.replaceElementsClassNames = docReplaceElementsClassNames;
function runApplication() {
alert("document.getElementsByClassName().length = " + document.getElementsByClassName().length + "\n\ndocument.getElementsByClassName("bgOrange").length = "+document.getElementsByClassName("bgOrange").length);
document.replaceElementsClassNames("bgBlack","bgOrange");
document.replaceElementsClassNames("orange","black");
document.replaceElementsClassNames("white","black");
document.replaceElementsClassNames("fixedCopy","defaultCopy");
}
//-->
</script>
<style type="text/css">
<!--
body {
margin-left : 0px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
font-family : verdana,geneva,helvetica,arial,sans-serif;
font-size : 0.8em;
color : #000000;
}
.defaultCopy {
font-size : 0.8em;
color : #000000;
}
.fixedCopy {
font-size : 10px;
line-height : 12px;
color : #000000;
}
.bold {font-weight : bold;}
.underline {text-decoration : underline;}
.bgOrange {background-color : #ffcc00;}
.bgBlack {background-color : #000000;}
.orange {color : #ffcc00;}
.white {color : #ffffff;}
.black {color : #000000;}
.floatLeft {float : left;}
div.borderColumn {width : 20%;}
div.contentColumn {width : 60%;}
//-->
</style>
</head>
<body onload="runApplication()" bgcolor="#f5f5f5" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<div id="content" name="content" style="width:100%">
<br /><br /><br /><br /><br />
<div id="leftColumnt" name="leftColumnt" class="borderColumn floatLeft"> </div>
<div id="middleColumn" name="middleColumn" class="contentColumn floatLeft">
defaultText, defaultText, defaultText, defaultText, <p class="bgOrange">defaultText, defaultText,</p> defaultText, defaultText, defaultText, defaultText,
defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText,
defaultText, defaultText, <span class="fixedCopy bgOrange">defaultText, defaultText,</span> defaultText, defaultText, defaultText, defaultText, defaultText, defaultText,
defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText,
defaultText, defaultText, <span class="fixedCopy white bgBlack">defaultText, defaultText,</span> defaultText, defaultText, defaultText, defaultText, defaultText, <p class="bgOrange">defaultText,</p>
defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText,
<span class="bgOrange">defaultText,</span> defaultText, defaultText, defaultText, <p class="fixedCopy orange bgBlack">defaultText, defaultText, defaultText,</p> defaultText, defaultText, defaultText,
defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText,
defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, defaultText, <span class="bold underline white bgOrange">defaultText;</span>
</div>
<div id="rightColumn" name="rightColumn" class="borderColumn floatLeft"> </div>
</div>
</body>
</html>
viel spass - by(t)e by(t)e - peterS. - pseliger@gmx.net