Here is the HTML code I am working with:
<!DOCTYPE html>
<html>
<head>
<style>
p{font-size:14pt;color:red;}
</style>
</head>
<body>
<div>
<p class="hello"> this is a p tag </p>
<p> this is a p without class defined</p>
<div> this is a div tag
<p> this is a p tag within the div</p>
</div>
</div>
<div id = "OriginalMail" class = "orgmail">
<p> this is a Original Mail</p>
<p class="hello"> this is a p tag </p>
<p> this is a p without class defined</p>
<div> this is a div tag
<p> this is a p tag within the div</p>
</div>
</div>
</body>
</html>
I have implemented a JavaScript function to apply styles only to the div with the class name orgmail.
var sheets = document.styleSheets;
var OriginalMail = document.getElementById("OriginalMail");
var className = OriginalMail.className;
var selectorAppender = "div." + className + " ";
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
var selectorText = rules[r].selectorText;
if(typeof selectorText !== "undefined") {
rules[r].selectorText = selectorAppender + selectorText;
}
}
}
The style is successfully applied only to the targeted div with the specified class.
However, I now need to update the data within the Style tag as well.
I attempted to modify the Style tag data using the following line of code:
rules[r].selectorText = selectorAppender + selectorText;
I am encountering an issue with this. Can someone assist me in resolving this problem?