nicht angemeldet
style background-image
Ich habe das folgende Problem:
in einer css-datei habe ich über "background-image" dem "body" ein Background-Image zugewiesen, was auch richtig funktioniert.
Nun wollte ich einem anderen DHTML-Element per Javascript dasselbe Background-Image zuweisen, stelle aber zu meinem Erstaunen fest, dass im DOM die Eigenschaft "body.style.background-image" ein leerer String ist!
Wie komme ich denn an diese in der css-Datein definierte Information heran???
-
Hallo Winfried.
Nun wollte ich einem anderen DHTML-Element per Javascript dasselbe Background-Image zuweisen, stelle aber zu meinem Erstaunen fest, dass im DOM die Eigenschaft "body.style.background-image" ein leerer String ist!
Wie komme ich denn an diese in der css-Datein definierte Information heran???
Befolge einfach die http://de.selfhtml.org/dhtml/modelle/microsoft.htm#css_schreibweise@title=Konventionen, die bei der Nutzung von CSS-Eigenschaften in JS zu beachten sind.
Einen schönen Montag noch.
Gruß, Ashura
-
Hallo.
Befolge einfach die http://de.selfhtml.org/dhtml/modelle/microsoft.htm#css_schreibweise@title=Konventionen, …
Hm. Auch gut, aber besser ist das: http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=Style-Eigenschaften.
Einen schönen Montag noch.
Gruß, Ashura
-
-
Ich habe das folgende Problem:
in einer css-datei habe ich über "background-image" dem "body" ein Background-Image zugewiesen, was auch richtig funktioniert.
Nun wollte ich einem anderen DHTML-Element per Javascript dasselbe Background-Image zuweisen, stelle aber zu meinem Erstaunen fest, dass im DOM die Eigenschaft "body.style.background-image" ein leerer String ist!
Wie komme ich denn an diese in der css-Datein definierte Information heran???
versuche mal backgroundImage..
siehe: http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften-
Das ist das gleiche Problem.
-
Das ist das gleiche Problem.
hmm, dann hab ich Dein Problem nicht genau verstanden...
kannste nochmal erläutern wo es GENAU drum geht?-
Ich habe in einer externen CSS-Datei u.a.folgende Definition:
========================================
body {
font-family: Verdana, Arial, sans-serif;
background-image: url(../../images/bg_green.png);
color: #A52A2A;
font-size: 12px;
margin: 0px;
scrollbar-base-color: #F0F7DA /*#BEDAB7*/;
scrollbar-3dlight-color:#AAD79D;
scrollbar-arrow-color:Brown;
scrollbar-darkshadow-color:#7BBA52;
scrollbar-highlight-color:#E3EBE2;
crollbar-shadow-color:#ABD390;
scrollbar-track-color: Brown /* #F0E68C #E3EBE2*/;
}========================================
Es wird dem Body also auch ein "background-image" gegeben, was auch ordnungsgemäß dargestellt wird. (Auch die anderen in dieser Datei definierten Styles werden richtig angewendet.)
Innerhalb der HTML-Seite möchte ich nun per Javascript einem (DIV-)Element dieses Background-Image zuweisen, mit folgendem Code:
document.getElementById("div_id").style.backgroundImage=document.body.style.backgroundImage;
Der Code wird auch fehlerlos verarbeitet, das Problem ist nun aber, dass "document.body.style.backgroundImage" einen leeren String, und nicht, wie ich erwartet hatte, so etwas wie "url(../../images/bg_green.png)".
Im Anhang füge ich eine Graphik bei, die einen Auschnitt der Anzeige des Objektbrowsers des MS-Skript-Debuggers für "document.body.style" zeigt.
Interessanterweise sind da alle Styles leer!
"document.body.background" ist übrigens auch leer!
Aber das Background-Image wird wunderbar angezeigt.
-
achso, dann guck dochmal in document.body.bgColor
mfG Markus
-
Hallo,
Es wird dem Body also auch ein "background-image" gegeben, was auch ordnungsgemäß dargestellt wird. (Auch die anderen in dieser Datei definierten Styles werden richtig angewendet.)
Der Code wird auch fehlerlos verarbeitet, das Problem ist nun aber, dass "document.body.style.backgroundImage" einen leeren String, und nicht, wie ich erwartet hatte, so etwas wie "url(../../images/bg_green.png)".
Ja, das Problem ist, dass JavaScript hier nur Zugriff auf das Dokument hat und nicht auf das StyleSheet. Was Du möchtest, ist aber der Zugriff auf, das, was zu sehen ist, also auf den View. Das geht ab DOM Level 2 mit Hilfe von window.getComputedStyle, weil das Objekt window das Interface ViewCSS implementieren sollte.
Natürlich kann der IE das wieder nicht. Er hat aber dafür eine Eigenschaft [Element].currentStyle, die man nutzen kann.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>currentStyle vs. getComputedStyle</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {background-image:url(Beispiel.jpg);}
-->
</style>
<script type="text/javascript">
<!--
function zeigeCSS() {
if (document.body.currentStyle) {
var bodyStyle = document.body.currentStyle;
} else if (window.getComputedStyle) {
var bodyStyle = window.getComputedStyle(document.body, null);
}
alert(bodyStyle);
alert(bodyStyle.backgroundImage);
}
//-->
</script>
</head>
<body>
<button onclick="zeigeCSS()">zeige CSS</button>
</body>
</html>viele Grüße
Axel
-
Hallo, Axel,
das sieht ja schon richtig gut aus, vielen Dank!
Ich habe das bei mir mal wie folgt umgesetzt:
===========================================================
hourglass=document.getElementById("hourglass"); //Display-area for search-timer
var bodyStyle,hourglassStyle;
if (document.body.currentStyle)
{
//IE
bodyStyle = document.body.currentStyle;
hourglassStyle= hourglass.currentStyle;
}
else if (window.getComputedStyle)
{
bodyStyle = window.getComputedStyle(document.body, null);
hourglassStyle= window.getComputedStyle(hourglass, null);
}
with (hourglassStyle)
{
backgroundImage=bodyStyle.backgroundImage;
background=bodyStyle.background;
border="solid 1px "+bodyStyle.color;
}===========================================================
Es funktioniert so weit, bis auf die Zeile
"backgroundImage=bodyStyle.backgroundImage;"
Dort liefert mir der MS-Debugger die Fehlermeldung "Ungültiger Prozeduraufruf oder ungültiges Argument"
"bodyStyle.backgroundImage" wird an der Stelle im Debugger angezeigt mit dem Wert:
"url("http://localhost/seifenparadies/xtcommerce/images/bg_green.png")"
Der Firefox-Debugger hat sich an der Stelle irgendwie verabschiedet.
Hast Du eine Idee, was das sein kann??
-
Hallo,
hourglass=document.getElementById("hourglass"); //Display-area for search-timer
var bodyStyle,hourglassStyle;
if (document.body.currentStyle)
{
//IE
bodyStyle = document.body.currentStyle;
hourglassStyle= hourglass.currentStyle;
}
else if (window.getComputedStyle)
{
bodyStyle = window.getComputedStyle(document.body, null);
hourglassStyle= window.getComputedStyle(hourglass, null);
}Sowei gut. Aber den hourglassStyle benötigst Du nicht.
with (hourglassStyle)
{
backgroundImage=bodyStyle.backgroundImage;
background=bodyStyle.background;
border="solid 1px "+bodyStyle.color;
}Nein! So geht das nicht. Das Objekt hourglassStyle ist hier in DOM2-fähigen Browsern ein CSSStyleDeclaration und im IE ein proprietäres Objekt. Beim DOM-Objekt, beim IE weiß ich es nicht so genau, kannst Du nicht einfach dessen Eigenschaften Werte zuweisen. Du müsstest die entsprechenden Methoden dazu benutzen. Aber so kompliziert musst Du es gar nicht machen. Das _Zuweisen_ der Eigenschaften kannst Du schon mit dem .style-Objekt des Elementes hourglass realisieren. Jetzt bist Du ja bereits im View und Du willst ja nicht wirklich die CSS-Ressource ändern? Das Problem war nur, dass DOM nicht auf die CSS-Ressource zugreifen kann sondern nur auf das HTML-Dokument und, dass bei diesem Zugriff uninteressant ist, wie der Browser HTML und CSS verbindet. Wenn JavaScript DOM-Elementen styles zuweist, dann wird das aber vom View schon dargestellt. ... meistens ;-)
with (hourglass)
{
style.backgroundImage=bodyStyle.backgroundImage;
style.border="solid 1px "+bodyStyle.color;
}Das "style.background=bodyStyle.background;" wäre nicht so einfach, weil das beim IE wieder etwas anderes ist, als beim DOM2. Man sollte aber ohnehin mit Javascript keine CSS-Sammeleigenschaften setzten. In der Reighenfolge, wie Du es angegeben hattest, würde das Setzten von background ja das backgroundImage wieder auf default setzen. Ein "style.backgroundColor=bodyStyle.backgroundColor;" würde funktionieren.
viele Grüße
Axel
-
Hallo, Axel,
Nein! So geht das nicht. Das Objekt hourglassStyle ist hier in DOM2-fähigen Browsern ein CSSStyleDeclaration und im IE ein proprietäres Objekt. Beim DOM-Objekt, beim IE weiß ich es nicht so genau, kannst Du nicht einfach dessen Eigenschaften Werte zuweisen.
Da hast Du natürlich recht!
Jetzt funktioniert das ganz prima!
Vielen Dank nochmal, das hätte ich ohne Deine Hilfe sicher nicht geschafft.
-
-
-
-
-
-
-