Dateiname des Hintergrundbildes abfragen?
Andi
- dhtml
0 MudGuard0 Andi
0 TorstenA0 Thomas Meinike0 Andi
Hallo,
ich würde gerne vor dem dynamischen Ändern eines Hintergrundbildes den Dateinamen als neues Attribut eines Objektes abspeichern.
So in etwa: obj.oldImage = "image.gif";
Aber wie komme ich an das alte Bild?
Folgendes liefert mir nur einen Leerstring:
alert(obj.style.background)
Folgendes funktionert, um das neue Bild zu setzen:
obj.style.background = "url(new_image.gif)";
Aber ich brauche dringend den Dateinamen des alten Bildes, bevor das neue gesetzt wird, um es nachher wieder zurück zu setzen.
Die Standard-Bilder werden per CSS-Klasse zugewiesen.
Jemand eine Idee?
Hi,
Folgendes funktionert, um das neue Bild zu setzen:
obj.style.background = "url(new_image.gif)";
Aber ich brauche dringend den Dateinamen des alten Bildes, bevor das neue gesetzt wird, um es nachher wieder zurück zu setzen.
Was gibt alert(obj.style.background) oder alert(obj.style.backgroundImage) aus?
cu,
Andreas
Hi Andreas,
"alert(obj.style.background)" gibt einen Leerstring zurück. Steht also gar kein Text in der Box.
"alert(obj.style.backgroundImage)" macht genau dasselbe.
Ich verstehe nicht warum das DOM-Modell offenbar so gestaltet wurde, dass die Initialwerte, die per CSS zugewiesen werden, nicht zur Verfügung stehen. Ich will doch nicht alle Styles erst zur Laufzeit per Script zuweisen. Das ist doch Arbeit ohne Ende.
Aber trotzdem vielen Dank.
Grüße,
Andi
Hi,
Folgendes funktionert, um das neue Bild zu setzen:
obj.style.background = "url(new_image.gif)";
Aber ich brauche dringend den Dateinamen des alten Bildes, bevor das neue gesetzt wird, um es nachher wieder zurück zu setzen.Was gibt alert(obj.style.background) oder alert(obj.style.backgroundImage) aus?
cu,
Andreas
Hi Andi,
ich würde gerne vor dem dynamischen Ändern eines Hintergrundbildes den Dateinamen als neues Attribut eines Objektes abspeichern.
Aber wie komme ich an das alte Bild?
Ich habe jetzt mal zwei Varianten getestet, die beide funktionieren:
var inhalt = "Hintergrundbild:"+document.getElementsByTagName("body")[0].style.background;
var inhalt = "Hintergrundbild:"+document.getElementsByTagName("body")[0].background;
Im Body steht:
<body background="./hg.jpg" style="background-image:url(./hg.jpg)">
Lasse ich die style-Angabe weg, liefert alert(inhalt) bei Variante 1 nichts, nur bei Variante 2. Lasse ich hingegen das background-Attribut weg, ist es umgekehrt. In beiden Fällen ist die Javascript-Anweisung am Ende des Body, hier könnte vielleicht dein Problem liegen, da du meines Wissens nach nur auf bereits existente Werte zugreifen kannst.
Ansonsten hülft vielleicht ein wenig mehr JS-Code oder ein Link zum Problem.
Viele Grüße
Torsten
Hallo,
Folgendes liefert mir nur einen Leerstring:
alert(obj.style.background)
obj.style bezieht sich auf per style-Attribut (oder DOM) zugewiesenen Inline-Styles. Ohne vorherige Zuweisung wird also ein Leerstring fuer die abgefragten Eigenschaften erhalten.
Die Standard-Bilder werden per CSS-Klasse zugewiesen.
Greife mittels document.styleSheets zu:
IE: document.styleSheets.item(0).rules.item("klasse").style.backgroundImage
Mozilla: document.styleSheets.item(0).cssRules.item("klasse").style.backgroundImage
obj.className liefert den Klassennamen, die 0 bezieht sich auf das erste Stylesheet.
MfG, Thomas
Hi Thomas,
das ist klasse, vielen Dank.
Nur leider wieder ein Unterschied zwischen IE und Mozilla. Das ist schön etwas ärgerlich, zumal die beiden Zeilen sich ja fast gleichen.
Aber Hauptsache, es geht irgendwie.
Viele Grüße,
Andreas.
Hallo,
Folgendes liefert mir nur einen Leerstring:
alert(obj.style.background)obj.style bezieht sich auf per style-Attribut (oder DOM) zugewiesenen Inline-Styles. Ohne vorherige Zuweisung wird also ein Leerstring fuer die abgefragten Eigenschaften erhalten.
Die Standard-Bilder werden per CSS-Klasse zugewiesen.
Greife mittels document.styleSheets zu:
IE: document.styleSheets.item(0).rules.item("klasse").style.backgroundImage
Mozilla: document.styleSheets.item(0).cssRules.item("klasse").style.backgroundImage
obj.className liefert den Klassennamen, die 0 bezieht sich auf das erste Stylesheet.
MfG, Thomas
Hallo,
das ist klasse, vielen Dank.
Nur leider wieder ein Unterschied zwischen IE und Mozilla. Das ist schön etwas ärgerlich, zumal die beiden Zeilen sich ja fast gleichen.
Einfach eine Abfrage auf das rules- bzw. cssRules-Objekt vorschalten, ein neues Objekt (hier styleobj) definieren und damit auf die CSS-Properties zugreifen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 10/03</title>
<style type="text/css">
<!--
.xyz
{
color: #00C;
background-color: #FFC;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function ChangeCSSRules()
{
var styleobj;
if(document.styleSheets.item(0).rules)
{
styleobj=document.styleSheets.item(0).rules;
}
else if(document.styleSheets.item(0).cssRules)
{
styleobj=document.styleSheets.item(0).cssRules;
}
if(styleobj)
{
alert(styleobj.item("xyz").selectorText);
alert(styleobj.item("xyz").style.color);
styleobj.item("xyz").style.color="#F00";
}
}
//-->
</script>
</head>
<body onload="ChangeCSSRules()">
<p class="xyz">Text</p>
</body>
</html>
MfG, Thomas