Auf externen CSS-Style-Bereich zugreifen
JavaScript

>> Auf internen CSS-Style-Bereich zugreifen

>> Auf CSS-Style-Bereich zugreifen (mit Klasse)

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 *
 * *********************************************************************************** */

var objStyles = null;

/* *********************************************************************************** *
 * 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                              *
 * *********************************************************************************** */
function initStyles(intStyle){
  // Falls das styleSheets-Objekt unterstützt wird
  if(document.styleSheets){
    // Passendes Regel-Objekt ermitteln
    objStyles = (document.styleSheets[intStyle].rules) ? document.styleSheets[intStyle].rules
                                                       : document.styleSheets[intStyle].cssRules;
  }
}

function changeStyle(){
  // Falls das styleSheets-Objekt unterstützt wird
  if(document.styleSheets){
    // Bei Bedarf StyleSheets erneut ermitteln (nächste Zeile aktivieren)
    // initStyles(0);

    // Eigenschaft über Index ändern
    setProperty(1, "color", "#ff0000");

    // Eigenschaft über ID ändern
    if(window.sidebar){
      setProperty("#h2_id", "MozOpacity", 1.0);
    }else if(document.all &&!window.opera){
      setProperty("#h2_id", "filter", "alpha(opacity=100");
    }

    // Eigenschaft über Selektorname ändern
    setProperty(".codeDiv h5.jsCode", "zIndex", 99);     // Zahlenwert ändern
    setProperty(".codeDiv h5.jsCode", "color", "#060");  // Stringwert ändern
  }
}

/* *********************************************************************************** *
 * 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        *
 * *********************************************************************************** */
function setProperty(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>=objStyles.length)) return;

    // Wert ändern
  }else{
    // Kollektion mit CSS-Regeln durchlaufen
    for(var i=0; i<objStyles.length; i++){
      // Falls der aktuelle Regelname dem gewünscheten Selektorname entspricht
      if(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("objStyles["+strSelectorText+"].style."+strProperty+"="+varValue);
  // Falls es sich um keinen reinen Zahlenwert handelt
  else
    // Neuen Wert zuweisen
    eval("objStyles["+strSelectorText+"].style."+strProperty+"='"+varValue+"'");
}

window.onload = function(){
  initStyles(0);
}
© 2006 Quaese