Tôi đã xem qua một số câu trả lời ở đây và tôi không thể tìm thấy bất cứ điều gì tự động thêm biểu định kiểu mới nếu không có, và nếu không chỉ sửa đổi một kiểu hiện có chứa kiểu cần thiết, vì vậy tôi đã tạo một hàm mới ( nên hoạt động trên tất cả các trình duyệt, mặc dù chưa được thử nghiệm, sử dụng addRule và bên cạnh đó chỉ có JavaScript gốc cơ bản, hãy cho tôi biết nếu nó hoạt động):
function myCSS(data) {
var head = document.head || document.getElementsByTagName("head")[0];
if(head) {
if(data && data.constructor == Object) {
for(var k in data) {
var selector = k;
var rules = data[k];
var allSheets = document.styleSheets;
var cur = null;
var indexOfPossibleRule = null,
indexOfSheet = null;
for(var i = 0; i < allSheets.length; i++) {
indexOfPossibleRule = findIndexOfObjPropInArray("selectorText",selector,allSheets[i].cssRules);
if(indexOfPossibleRule != null) {
indexOfSheet = i;
break;
}
}
var ruleToEdit = null;
if(indexOfSheet != null) {
ruleToEdit = allSheets[indexOfSheet].cssRules[indexOfPossibleRule];
} else {
cur = document.createElement("style");
cur.type = "text/css";
head.appendChild(cur);
cur.sheet.addRule(selector,"");
ruleToEdit = cur.sheet.cssRules[0];
console.log("NOPE, but here's a new one:", cur);
}
applyCustomCSSruleListToExistingCSSruleList(rules, ruleToEdit, (err) => {
if(err) {
console.log(err);
} else {
console.log("successfully added ", rules, " to ", ruleToEdit);
}
});
}
} else {
console.log("provide one paramter as an object containing the cssStyles, like: {\"#myID\":{position:\"absolute\"}, \".myClass\":{background:\"red\"}}, etc...");
}
} else {
console.log("run this after the page loads");
}
};
sau đó chỉ cần thêm 2 hàm trợ giúp này vào bên trong hàm trên hoặc bất kỳ nơi nào khác:
function applyCustomCSSruleListToExistingCSSruleList(customRuleList, existingRuleList, cb) {
var err = null;
console.log("trying to apply ", customRuleList, " to ", existingRuleList);
if(customRuleList && customRuleList.constructor == Object && existingRuleList && existingRuleList.constructor == CSSStyleRule) {
for(var k in customRuleList) {
existingRuleList["style"][k] = customRuleList[k];
}
} else {
err = ("provide first argument as an object containing the selectors for the keys, and the second argument is the CSSRuleList to modify");
}
if(cb) {
cb(err);
}
}
function findIndexOfObjPropInArray(objPropKey, objPropValue, arr) {
var index = null;
for(var i = 0; i < arr.length; i++) {
if(arr[i][objPropKey] == objPropValue) {
index = i;
break;
}
}
return index;
}
(lưu ý rằng trong cả hai chúng tôi đều sử dụng vòng lặp for thay vì .filter, vì các lớp danh sách kiểu / quy tắc CSS chỉ có thuộc tính độ dài và không có phương thức .filter.)
Sau đó, để gọi nó:
myCSS({
"#coby": {
position:"absolute",
color:"blue"
},
".myError": {
padding:"4px",
background:"salmon"
}
})
Hãy cho tôi biết nếu nó hoạt động cho trình duyệt của bạn hoặc đưa ra lỗi.