Wie kann JavaScript einer Webseite dynamisch CSS-Stile hinzufügen?

CSS-Stile dynamisch mit JavaScript hinzufügen

Die Möglichkeit, CSS-Regeln dynamisch über JavaScript hinzuzufügen, ist eine leistungsstarke Technik zum Ändern des visuellen Erscheinungsbilds eines Webseite im Handumdrehen. Ein gängiger Ansatz besteht darin, ein neues Stilelement zu erstellen und es an den Dokumentkopf anzuhängen.

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }
    
    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.textContent = styles
document.head.appendChild(styleSheet)

Dieser Code erstellt ein neues Stilelement und legt seinen Textinhalt auf die bereitgestellten CSS-Stile fest. Als nächstes wird das Stilelement an den Kopf des Dokuments angehängt, wodurch sichergestellt wird, dass die Stile sofort angewendet werden.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript einer Webseite dynamisch CSS-Stile hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!