Axel Richter: CSS-Attribute lesen/ändern via JavaScript

Beitrag lesen

SELF-Forum

CSS-Attribute lesen/ändern via JavaScript

Axel Richter
+2 Informationen zu den Bewertungsregeln

Hallo,

So ganz neu bin ich auf diesen Gebiet nicht und ich weiß, dass mein Anliegen, bereits mit einem

document.getElementById("element").style.background = irgendwas

*räusper*
Du willst wirklich die CSS-Eigenschaft background ändern? Nicht etwa nur background-color (.style.backgroundColor) oder background-image (.style.backgroundImage)?

erledigt wäre. Jetzt möchte ich mir jedoch erst einen solchen background holen, um ihn mir zu merken (für einen hover-Effekt über eine Zeile). Doch habe ich das Style für diese Zeile (ein th-Tag) in einer externen CSS-Datei definiert - und bekomme mit einer äquivalenten Zeile wie oben keinen Wert für den Hintergrund.

Die äquivalente Zeile wäre? Etwa so:
var myBgColor =  document.getElementById("element").style.backgroundColor

So kannst Du aber, wie Du richtig erkannt hast, nicht die CSS-Eigenschaften auslesen, die via STYLE-Element gesetzt wurden. Anders gesagt, du bekommst so nur die Einstellungen, die via style-Attribut oder mit JavaScript gesetzt wurden.

Wenn Du nicht, wie in Siechfreds Vorschlag, die komplette styleSheets-Collection durchforsten willst, kannst Du auch mit .currentStyle (IE) bzw. document.defaultView.getComputedStyle (Gecko) arbeiten.

Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>getCurrentStyle</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
p#P1 {background:#00AFAF url(Beispiel2.jpg) repeat-x;}  
-->  
</style>  
<script type="text/javascript">  
<!--  
function getCurrentStyle(ID) {  
 if (document.getElementById) {  
  if (document.getElementById(ID).currentStyle) {  
   return document.getElementById(ID).currentStyle;  
  } else if (document.defaultView) {  
    if (document.defaultView.getComputedStyle) {  
     return document.defaultView.getComputedStyle(document.getElementById(ID), "");  
    }  
  }  
 }  
 return document.getElementById(ID).style  
}  
  
//-->  
</script>  
</head>  
<body>  
<p id="P1">Test</p>  
<p><button onclick="alert(document.getElementById('P1').style.backgroundColor);">GetStyle1</button>  
<button onclick="alert(getCurrentStyle('P1').backgroundColor);">GetStyle2</button></p>  
</body>  
</html>

viele Grüße

Axel

Beitrag melden
+2
Informationen zu den Bewertungsregeln