Manuela: CSS-Attribute lesen/ändern via JavaScript

SELF-Forum

CSS-Attribute lesen/ändern via JavaScript

Manuela
– Informationen zu den Bewertungsregeln

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?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS-Attribute lesen/ändern via JavaScript

    Siechfred Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    --
    Der Elternabend || Denis D'Amour - ein Nachruf
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. 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

  3. CSS-Attribute lesen/ändern via JavaScript

    Ashura Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    --
    The End of an Era...
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS-Attribute lesen/ändern via JavaScript

      Axel Richter
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Attribute lesen/ändern via JavaScript

        Ashura Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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

        --
        The End of an Era...
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln