CSS Regeln mit JavaScript hinzufügen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hier wird erläutert wie man mit JavaScript dynamisch CSS Regeln hinzufügen kann.

    Inhaltsverzeichnis

    Man kann dynamisch ein Element "style" in den DOM Baum einhängen. Auf diese Art können CSS dynamisch nachgeladen werden.
    Bei einigen Browser muss das style.styleSheet Element genutzt werden, bei anderen hängt man einfach einen Textknoten ein.

    Code

    Dazu habe ich folgende Funktion eingeführt:

    Quellcode

    1. function addCss(rules) {
    2. var head = document.getElementsByTagName('head')[0],
    3. style = document.createElement('style'),
    4. rules = document.createTextNode(rules);
    6. style.type = 'text/css';
    7. if(style.styleSheet)
    8. style.styleSheet.cssText = rules.nodeValue;
    9. else style.appendChild(rules);
    10. head.appendChild(style);
    11. };
    Alles anzeigen


    Beispiel

    Ein Beispielaufruf sieht wie folgt aus:

    Quellcode

    1. addCss(
    2. 'li {'+
    3. ' list-style-type: none;'+
    4. '}'+
    5. 'li a {'+
    6. ' display:block;'+
    7. ' border-bottom:1px solid #afafaf;'+
    8. ' margin:10px;'+
    9. '}'+
    10. 'li a:hover {'+
    11. ' border-color:#00ff00;'+
    12. ' background-color:#eeffee;'+
    13. '}'
    14. );
    Alles anzeigen


    Ihr könnt das auch live ausprobieren unter demo.easy-coding.de/css/add-css-with-javascript/

    9.212 mal gelesen