CSS-Attribute lesen/ändern via JavaScript
Manuela
- javascript
0 Siechfred2 Axel Richter0 Ashura0 Axel Richter0 Ashura
Hallo alle miteinander!
So ganz neu bin ich auf diesen Gebiet nicht und ich weiß, dass mein Anliegen, bereits mit einem
document.getElementById("element").style.background = irgendwas
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.
Hat jemand eine Idee, wie ich es anstelle, dennoch an die voreingestellte Hintergrundfarbe zu kommen?
Tag Manuela.
Hat jemand eine Idee, wie ich es anstelle, dennoch an die voreingestellte Hintergrundfarbe zu kommen?
Vielleicht helfen dir Cybaers Beispielcode und Struppis Funktionsbibliothek weiter.
Siechfred
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
Hallo Manuela.
Jetzt möchte ich mir jedoch erst einen solchen background holen, um ihn mir zu merken [...]
Das ist nicht unbedingt erforderlich, da die Browser das für dich übernehmen können.
Hat jemand eine Idee, wie ich es anstelle, dennoch an die voreingestellte Hintergrundfarbe zu kommen?
Wenn du mittels
document.getElementById("element").style.background = irgendwas;
den Hintergrund veränderst (wobei sich hier wirklich backgroundColor anbietet), kannst du den Standardwert wie bei allen anderen CSS-Eigenschaften auch ganz einfach mit einem Leerstring wiederherstellen, also
document.getElementById("element").style.background = '';
Einen schönen Dienstag noch.
Gruß, Ashura
Hallo,
Wenn du mittels
document.getElementById("element").style.background = irgendwas;
den Hintergrund veränderst (wobei sich hier wirklich backgroundColor anbietet), kannst du den Standardwert wie bei allen anderen CSS-Eigenschaften auch ganz einfach mit einem Leerstring wiederherstellen,
Ja, das ist ein guter Hinweis. Aber...
also
document.getElementById("element").style.background = '';
Nein, das funktioniert nicht im IE. Die Sammeleigenschaft background lässt sich so im IE nicht wiederherstellen.
document.getElementById("element").style.backgroundColor = '';
würde den vom STYLE-Element übernommenen Wert für background-color wiederherstellen.
viele Grüße
Axel
Hallo Axel.
document.getElementById("element").style.background = '';
Nein, das funktioniert nicht im IE. Die Sammeleigenschaft background lässt sich so im IE nicht wiederherstellen.
Copy-and-Paste-Effekt. Daher schrieb ich ja auch „(wobei sich hier wirklich backgroundColor anbietet)“.
document.getElementById("element").style.backgroundColor = '';
würde den vom STYLE-Element übernommenen Wert für background-color wiederherstellen.
Meine ich doch.
Einen schönen Dienstag noch.
Gruß, Ashura