Auf CSS-Style-Bereich (mit Klasse)
JavaScript, OOP

>> Auf internen CSS-Style-Bereich zugreifen

>> Auf externen CSS-Style-Bereich zugreifen

Problembeschreibung

Hier wird die Methode vorgestellt, mit deren Hilfe auf einen externen Style-Bereich (über LINK eingebunden) eines Dokumentes und damit auf die enthaltenen Regeln zugegriffen werden kann. Es ist somit möglich, Styles zur Laufzeit mit Hilfe von JavaScript zu ändern.

Umsetzung

Zur Realisierung stehen folgende Objekte zur Verfügung:

Es gilt zu beachten, dass die Objekte nicht in allen Browsern zur Verfügung stehen. Somit ist ein Einsatz nur bedingt zu empfehlen.

Beispiel - Eigenschaftsänderungen

Durch Betätigen des Buttons werden die Schriftfarbe des Bodys sowie der Code-Überschrift geändert. Ausserdem erhält die Code-Überschrift einen neuen z-index. Letzteres kann optisch nicht erfasst werden und wurde nur zu Demonstrationszwecken eingefügt.

Quellcode zum Beispiel

Der folgende Quellcode zeigt die oben vorgestellte Routine.

JavaScript:
/* *********************************************************************************** *
 * StyleSheet-Bereiche verändern                                                       *
 *                                                                    Quaese 2006/2007 *
 * *********************************************************************************** */
function StyleSheetObject(intStyle){
  // Anwendereinstellungen
  this.showErrMsg = false;

  // Interne Variable
  var objThis = this;    // Closure-Variable
  this.objStyles = null; // StyleSheetObjekt


/* *********************************************************************************** *
   * Funktion zum Erstellen der StyleSheet-Kollektion.                                   *
   *                                                                                     *
   * Parameter:                                                                          *
   *   intStyle - Nummer des StyleSheet-Bereichs, von dem eine Kollektion erstellt wer-  *
   *              den soll (beginnend bei Null).                                         *
   *              Solche Bereiche können interne style-Bereiche und externe Dateien, die *
   *              mit dem link-Tag eingebunden werden, sein                              *
   * *********************************************************************************** */
  this.initStyles = function(intStyle){
    // Falls das styleSheets-Objekt unterstützt wird
    if(document.styleSheets){
      // Test, ob ein Stylesheets-Objekt im Dokument existiert
      try{
        // Passendes Regel-Objekt ermitteln
        this.objStyles = (document.styleSheets[intStyle].rules) ? document.styleSheets[intStyle].rules
                                                                : document.styleSheets[intStyle].cssRules;
      }catch(objErr){
        if(this.showErrMsg)
          alert("FEHLER\n\n" + "Es konnte kein Stylesheet-Objekt erstellt werden!\n\n" + "Fehlermeldung:\n" + objErr['description']);
        this.objStyles = null;
      } // ENDE - try-catch
    }else{
      if(this.showErrMsg)
        alert("FEHLER\n\n" + "Ihr Browser unterstützt kein styleSheets-Objekt!\n\n" + "Fehlermeldung:\n" + objErr['description']);
      this.objStyles = null;
    }
  }


/* *********************************************************************************** *
   * Funktion zum Ändern einer Eigenschaft in einer CSS-Regel.                           *
   *                                                                                     *
   * Parameter:                                                                          *
   *   strSelectorText - Definiert die/den CSS-Regel/-Selektor, in der/dem eine Eigen-   *
   *                     schaft geändert werden soll.                                    *
   *                     Es kann der Index (Integerwert) oder der komplette Selektor     *
   *                     (String) übergeben werden.                                      *
   *   strProperty     - Eigenschaft die geändert werden soll in JS-Schreibweise,        *
   *                     siehe: http://www.quaese.de/texte/webdesign/beispiele/arrCSS.js *
   *   varValue        - Neuer Wert als String oder Zahlenwert                           *
   *                                                                                     *
   * Beispiele:                                                                          *
   *   setProperty(0, "color", "#ff0000");          // Schriftfarbe rot in erster Regel  *
   *   setProperty("body .s1", "color", "#ff0000"); // Schriftfarbe rot in Selektor      *
   *   setProperty(".s1", "zIndex", 99);            // z-index auf 99 in Selektor        *
   * *********************************************************************************** */
  this.setProperty = function(strSelectorText, strProperty, varValue){
    // Falls mit Hilfe eines Indices geändert werden soll
    if(!isNaN(strSelectorText)){
      strSelectorText = parseInt(strSelectorText);
      // Wenn der Index nicht im gültigen Bereich liegt
      if((strSelectorText<0) || (strSelectorText>=this.objStyles.length)) return;

    // Wert ändern
    }else{
      // Kollektion mit CSS-Regeln durchlaufen
      for(var i=0; i<this.objStyles.length; i++){
        // Falls der aktuelle Regelname dem gewünscheten Selektorname entspricht
        if(this.objStyles[i].selectorText.toLowerCase() == strSelectorText.toLowerCase()){
          strSelectorText = i;
          break;
        }  // ENDE - if(objStyles[i].selectorText.toLowerCase() == strSelectorText.toLowerCase())
      }  // ENDE - for(var i=0; i<objStyles.length; i++)
    }  // ENDE - if(!isNaN(strSelectorText))

    // Falls es sich beim neuen Wert um einen reinen Zahlenwert handelt
    if(!isNaN(varValue))
      // Neuen Wert zuweisen
      eval("this.objStyles["+strSelectorText+"].style."+strProperty+"="+varValue);
    // Falls es sich um keinen reinen Zahlenwert handelt
    else
      // Neuen Wert zuweisen
      eval("this.objStyles["+strSelectorText+"].style."+strProperty+"='"+varValue+"'");
  }

  // StyleSheets-Objekt initialisieren
  this.initStyles(intStyle);
}


window.onload = function(){
  objNewStyle = new StyleSheetObject(0);
}
© 2007 Quaese