Bagaimanakah JavaScript Boleh Menambah Gaya CSS Secara Dinamik pada Halaman Web?

Menambah Gaya CSS Secara Dinamik dengan JavaScript

Keupayaan untuk menambah peraturan CSS secara dinamik melalui JavaScript ialah teknik yang berkuasa untuk mengubah suai rupa visual sesuatu laman web dengan cepat. Satu pendekatan biasa ialah mencipta elemen gaya baharu dan menambahkannya pada kepala dokumen.

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

Kod ini mencipta elemen gaya baharu dan menetapkan kandungan teksnya kepada gaya CSS yang disediakan. Seterusnya, ia menambahkan elemen gaya pada kepala dokumen, yang memastikan gaya digunakan serta-merta.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Menambah Gaya CSS Secara Dinamik pada Halaman Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!