मैं यहाँ कुछ उत्तरों को देख रहा था, और मुझे कुछ भी नहीं मिल रहा था, अगर कोई भी नहीं है तो स्वचालित रूप से एक नई स्टाइलशीट जोड़ता है, और यदि नहीं तो एक मौजूदा एक को संशोधित करता है जिसमें पहले से ही आवश्यक स्टाइल शामिल है, इसलिए मैंने एक नया फ़ंक्शन बनाया ( सभी ब्राउज़रों के बीच काम करना चाहिए, हालांकि परीक्षण नहीं किया गया है, addRule का उपयोग करता है और इसके अलावा केवल मूल देशी जावास्क्रिप्ट, मुझे पता है कि यह काम करता है):
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");
}
};
इसके बाद बस इन 2 सहायक कार्यों को उपरोक्त फ़ंक्शन के अंदर, या कहीं और जोड़ें:
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;
}
(ध्यान दें कि उन दोनों में मैं .filter के बजाय लूप के लिए उपयोग करता हूं, क्योंकि CSS स्टाइल / रूल लिस्ट की कक्षाओं में केवल एक लंबी संपत्ति होती है, और कोई .filter विधि नहीं होती है।)
फिर इसे कॉल करने के लिए:
myCSS({
"#coby": {
position:"absolute",
color:"blue"
},
".myError": {
padding:"4px",
background:"salmon"
}
})
मुझे बताएं कि क्या यह आपके ब्राउज़र के लिए काम करता है या कोई त्रुटि देता है।