আমি এখানে কয়েকটি উত্তর সন্ধান করছিলাম, এবং আমি কিছুই খুঁজে পেলাম না যা যদি না থাকে তবে স্বয়ংক্রিয়ভাবে একটি নতুন স্টাইলশিট যুক্ত করে, এবং যদি না এমন কোনও উপস্থিতিকে সংশোধন না করে যা ইতিমধ্যে প্রয়োজনীয় স্টাইলটি ধারণ করে, তাই আমি একটি নতুন ফাংশন করেছি ( সমস্ত ব্রাউজার জুড়ে কাজ করা উচিত, যদিও এটি পরীক্ষিত না হয়েও অ্যাডরুল ব্যবহার করে এবং কেবলমাত্র বেসিক নেটিভ জাভাস্ক্রিপ্টের কাজ করে তবে তা আমাকে জানায়):
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;
}
(লক্ষ্য করুন যে উভয়টিতেই আমি ফিল্টারের পরিবর্তে লুপের জন্য ব্যবহার করি, যেহেতু সিএসএস স্টাইল / নিয়ম তালিকার ক্লাসগুলির কেবল দৈর্ঘ্যের সম্পত্তি থাকে এবং কোনও ফিল্টার পদ্ধতি নেই))
তারপরে এটি কল করতে:
myCSS({
"#coby": {
position:"absolute",
color:"blue"
},
".myError": {
padding:"4px",
background:"salmon"
}
})
এটি যদি আপনার ব্রাউজারের জন্য কাজ করে বা ত্রুটি দেয় তবে আমাকে জানান।