Axel Richter: style background-image

Beitrag lesen

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