CSS-Stile mit JavaScript auf ein Element anwenden (Tutorial)

[Bildschirmfoto / Grafik]
 CSS-Stile mit JavaScript auf ein Element anwenden

• Beispiele unter: Image-Highlight (Spotlight) Generator
und Bilder-Farbrotation mit Gradient

Inline-Stile

const pizza = document.querySelector('.pizza');

// Ändern der Textfarbe in Weiß
pizza.style.color = 'white';

// Hintergrundfarbe auf Blau setzen
pizza.style.backgroundColor = 'blue';

//Schriftschnitt kursiv ändern
pizza.style.fontStyle = 'italic';

Stile hinzufügen oder entfernen

document.getElementById("xx").classList.add("pizza");

document.getElementById("xx").classList.remove("pizza");

document.getElementById("xx").classList.toggle("pizza");

Globale Stile

// Erstellen eines Elements
const style = document.createElement('style');

// CSS-Stile hinzufügen
style.innerHTML = `
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`;

// An dem DOM anhängen
document.head.appendChild(style);

CSS-Objektmodell

// Erstellen eines neuen Stils
const style = document.createElement('style');

// An dem DOM anhängen
document.head.appendChild(style);


// CSS-Regel einfügen
style.sheet.insertRule(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`);

Konstruierbare Stylesheets

// Erstellen eines neuen freigegebenen Stylesheets
const sheet = new CSSStyleSheet();

// CSS-Stile hinzufügen
sheet.replaceSync(`
    .pizza {
        color: white;
        background-color: blue;
        font-style: italic;
    }
`);

// Anwenden eines Stylesheets auf ein Dokument
document.adoptedStyleSheets = [sheet];