Thêm quy tắc CSS vào stylesheet bằng JavaScript

Phương thức insertRule() thêm quy tắc tại vị trí xác định trong stylesheet, deleteRule() xóa quy tắc.

Các ví dụ minh họa thêm/xóa quy tắc CSS bằng JavaScript.

Ví dụ

<!DOCTYPE html> <html> <head> <style type="text/css" id="custom"> body {    background-color: silver; } </style> </head> <body> <h1>Custom CSS!</h1> <p>Woohoo!</p> <script> let newSheet = document.getElementById('custom').sheet let cs = 'p {';    cs += 'margin: 4%;';    cs += 'padding: 2%;';    cs += 'font-size: 22px;';    cs += 'box-shadow: -10px 4px 0 chartreuse;';    cs += '}'; newSheet.insertRule(cs, 0); </script> </body> </html>

Kết quả

Kết quả như hình (thêm style cho thẻ p).

Ví dụ 2

<!DOCTYPE html> <html> <head> <style type="text/css" id="demo"> div {    margin: 3%;    text-align: center;    background-color: powderblue; } p {    box-shadow: 0 0 12px rgba(0,0,0,0.6); } h2 {    color: red; } </style> </head> <body> <div> <h2>Custom CSS!</h2>    <p>Woohoo!</p> </div> <script> let mySheet = document.getElementById('demo').sheet let cs = 'h2 { border: 2px solid green; }' mySheet.deleteRule(2); mySheet.insertRule(cs, 0); </script> </body> </html>

Kết quả

Kết quả như hình (xóa rule h2 cũ, thêm rule h2 mới có border).