Menu
Hi this is the HTML code
<html>
<head>
<link rel="stylesheet" type="text/css" href="Theme.css">
</head>
<body>
<div>
<textarea id="ta" onpaste="functionItalic(event)" class="foostyle2"></textarea>
</div>
<div>
<span style="font-weight: bolder; font-size: 20px;">
<span id="1">Karan's</span>
</span>
<span style="font-weight: bolder; font-size: 24px; font-style: italic;">test</span>
</div>
<script>
function functionItalic(pasteEvent)
{
var textareacont = (pasteEvent.originalEvent || pasteEvent).clipboardData.getData("text/html");
console.log(textareacont);
var styleSheetList = document.styleSheets;
document.getElementById("1").className = "foostyle";
var stringCSS = ".foostyle{font-family: Times-Roman;font-size:10pt;color:rgb(0,0,0);font-style:normal;}";
styleSheetList[0].insertRule(stringCSS, styleSheetList[0].cssRules.length);
}
</script>
</body>
</html>
When I run this file everything works fine and style gets added.
But as soon I as change the value of stringCSS to
var stringCSS = ".foostyle{font-family: Times-Roman;font-size:10pt;color:rgb(0,0,0);font-style:normal;} .foostyle2{background: green;}";
The browser provides an error
SyntaxError: An invalid or illegal string was specified
styleSheetList[0].insertRule(stingCSS, styleSheetList[0].cssRules.length);
What am I missing is adding multiple classes/rule through insertRule not possible or I have done some mistake? please help.
966
asked Jul 28 '26 22:07
The specification states that
If more than one rule is given in the rule parameter, then aborts with SyntaxError
So what is a rule, the specification also says that a rule is
... a DOMString containing the rule to be inserted, ...where rule specifies selector and declaration, or at-identifier and rule content.
So it's a string with a "selector and a declaration" of styles, in other words a rule is
.selector {declaration : of_styles}
or with the "at-identifier and rule content"
@font-face { font-family: 'font'; src: local('font'), url(/font.ttf); }
You're passing it
.foostyle{font-family: Times-Roman;font-size:10pt;color:rgb(0,0,0);font-style:normal;}
.foostyle2{background: green;}
which is two rules, and it aborts with a syntax error, as expected.
To solve it, you have to call insertRule() twice, once for each rule
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
