CSS Regeln mit JavaScript hinzufügen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

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

    Table Of Contents

    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:

    Source Code

    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. };
    Display All


    Beispiel

    Ein Beispielaufruf sieht wie folgt aus:

    Source Code

    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. );
    Display All


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

    6,670 times viewed