CSSStyleSheet: insertRule() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phương thức CSSStyleSheet.insertRule() chèn một CSS rule mới vào bảng kiểu hiện tại.
Note:
Mặc dù insertRule() là phương thức riêng của
CSSStyleSheet, nó thực sự chèn quy tắc vào
CSSStyleSheet.cssRules — CSSRuleList nội bộ của nó.
Cú pháp
insertRule(rule)
insertRule(rule, index)
Tham số
rule-
Một chuỗi chứa quy tắc cần chèn. Nội dung quy tắc cần chèn phụ thuộc vào loại của nó:
indexOptional-
Một số nguyên dương nhỏ hơn hoặc bằng
stylesheet.cssRules.length, đại diện cho vị trí của quy tắc mới được chèn trongCSSStyleSheet.cssRules. Mặc định là0. (Trong các triển khai cũ hơn, tham số này là bắt buộc. Xem Browser compatibility để biết chi tiết.)
Giá trị trả về
Chỉ số của quy tắc mới được chèn trong danh sách quy tắc của bảng kiểu.
Ngoại lệ
IndexSizeErrorDOMException-
Được ném ra nếu
index>CSSRuleList.length. HierarchyRequestErrorDOMException-
Được ném ra nếu
rulekhông thể được chèn tại vị trí chỉ định do một số ràng buộc CSS; ví dụ: cố gắng chèn một@importat-rule sau một style rule. SyntaxErrorDOMException-
Được ném ra nếu có nhiều hơn một quy tắc được truyền trong tham số
rule. InvalidStateErrorDOMException-
Được ném ra nếu
rulelà@namespacevà danh sách quy tắc chứa các at-rule khác ngoài@importvà@namespaceat-rules.
Ví dụ
Chèn một quy tắc mới
Đoạn mã này đẩy một quy tắc mới lên đầu bảng kiểu của tôi.
myStyle.insertRule("#blanc { color: white }", 0);
Hàm để thêm quy tắc bảng kiểu
/**
* Thêm một quy tắc bảng kiểu vào tài liệu (có thể thực hành tốt hơn
* là thay đổi các lớp động, để thông tin kiểu dáng có thể được giữ trong
* các bảng kiểu thực tế và tránh thêm phần tử thừa vào DOM).
* Lưu ý rằng cần một mảng cho các khai báo và quy tắc vì ECMAScript không
* đảm bảo thứ tự lặp đối tượng có thể đoán trước, và vì CSS
* phụ thuộc vào thứ tự.
* @param {Array} rules Chấp nhận một mảng các khai báo được mã hóa JSON
* @example
addStylesheetRules([
['h2', // Cũng chấp nhận đối số thứ hai là một mảng các mảng thay thế
['color', 'red'],
['background-color', 'green', true] // 'true' cho các quy tắc !important
],
['.myClass',
['background-color', 'yellow']
]
]);
*/
function addStylesheetRules(rules) {
const styleEl = document.createElement("style");
// Nối phần tử <style> vào <head>
document.head.appendChild(styleEl);
// Lấy sheet của phần tử style
const styleSheet = styleEl.sheet;
for (let rule of rules) {
let i = 1,
selector = rule[0],
propStr = "";
// Nếu đối số thứ hai của một rule là một mảng các mảng, điều chỉnh các biến.
if (Array.isArray(rule[1][0])) {
rule = rule[1];
i = 0;
}
for (; i < rule.length; i++) {
const prop = rule[i];
propStr += `${prop[0]}: ${prop[1]}${prop[2] ? " !important" : ""};\n`;
}
// Chèn CSS Rule
styleSheet.insertRule(
`${selector}{${propStr}}`,
styleSheet.cssRules.length,
);
}
}
Specifications
| Thông số kỹ thuật |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-insertrule |