Bagaimanakah jQuery Boleh Menjana dan Menggunakan Peraturan CSS Secara Dinamik Tanpa Fail CSS Statik?

Penjanaan Peraturan CSS Dinamik menggunakan jQuery

Masalah:

Fail CSS selalunya memerlukan takrifan statik peraturan CSS. Bagaimanakah kita boleh mencipta peraturan CSS boleh guna semula secara dinamik pada masa jalan tanpa menggunakan fail CSS statik?

Penyelesaian:

Menggunakan jQuery, kami boleh menambahkan

$("<style type="text/css"> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");

Contoh:

Untuk mencipta peraturan CSS statik #my-window, kami akan menambah mengikuti elemen kepala HTML document:

$("<style type="text/css"> #my-window { position:fixed; z-index:102; display:none; top:50%; left:50%; } </style>").appendTo("head");

Penggunaan:

Selepas mentakrifkan peraturan CSS dengan cara ini, ia boleh digunakan pada elemen DOM menggunakan kaedah addClass():

$("element-to-style").addClass("my-window");

Kaedah ini membolehkan penciptaan dan penggunaan peraturan CSS boleh guna semula dengan mudah tanpa memerlukan CSS berasingan fail.

Atas ialah kandungan terperinci Bagaimanakah jQuery Boleh Menjana dan Menggunakan Peraturan CSS Secara Dinamik Tanpa Fail CSS Statik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!