nicht angemeldet
class-Attribut dynamisch verändern
Hallo!
Dynamisch mit JavaScript das style-Attribut eines HTML-Objekts zu verändern, ist ja kein Problem. Manchmal wäre es aber sicher einfacher, wenn man einfach die Klasse, zu der das Objekt gehört, umzuändern, so daß die CSS für die neue Klasse greifen und man nicht alle style-Eigenschaften einzeln ändern muß. Geht das auch?
Beispiel:
CSS-Definitionen etwa:
.text1 { background-color:yellow; }
.text2 { background-color:red;}
im HTML-Dokument steht irgendwo:
<p class="text1">ganz viel text</p>
Irgendwo also ein Link oder Event, wo das Script den Style dieses Absatzes ändern soll, also quasi das class="text1" durch class="text2" austauscht.
Nun kann man natürlich nicht so einfach auf das Attribut "class" zugreifen (etwa mit objekt.class), weil "class" ja ein Schlüsselwort ist, also gar nicht der Name einer Objekteigenschaft sein kann. Mir ist nun aber aufgefallen, daß man mit setAttribute() bzw. getAttribute() auch nicht sehr weit kommt: im Netscape7 funktioniert es zwar, aber nicht im Internet Explorer. Gibt es vielleicht noch eine andere Möglichkeit?
Tschau,
apstrakt
-
Hi!
className ist die gesuchte Eigenschaft. http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#universaleigenschaften
Gruß Herbalizer
-
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.htmdas 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
-
vielen dank peterS,
sehr interressant, dein posting, aber das wäre für mich wie mit kanonen auf spatzen zu schießen. ich war einfach nur zu blöd das universalattribut className in selfhtml zu finden. trotzdem vielen dank. ich habe auch noch was SEHR interessantes von deinem link lernen können: daß man mit dem sternchen als platzhalter bei document.getElementsByTagName("*") operieren kann.
gruß,
apstrakt
-