Question

嗨，这是HTML代码

<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>

当我运行此文件时，一切正常并且样式被添加。

但是我尽快将stringCSS的值更改为

var stringCSS = ".foostyle{font-family: Times-Roman;font-size:10pt;color:rgb(0,0,0);font-style:normal;} .foostyle2{background: green;}";

浏览器提供错误

SyntaxError: An invalid or illegal string was specified
styleSheetList[0].insertRule(stingCSS, styleSheetList[0].cssRules.length);

我缺少的是通过insertRule添加多个类/规则是不可能的，或者我做了一些错误？请帮忙。

Answer 1

specification表示

如果规则参数中给出了多个规则，则中止的SyntaxError

那么规则是什么，规范还说规则是

...包含要插入的规则的DOMString，...其中规则指定选择器和声明，或at-identifier和规则内容。

所以它是一个带有＆＃34;选择器和声明＆＃34; 样式的字符串，换句话说，规则是

.selector {declaration : of_styles}

或使用＆＃34; at-identifier和规则内容＆＃34;

@font-face { font-family: 'font'; src: local('font'), url(/font.ttf); }

你传递了它

.foostyle{font-family: Times-Roman;font-size:10pt;color:rgb(0,0,0);font-style:normal;} 
.foostyle2{background: green;}

这是两个规则，并按预期中止语法错误。

要解决此问题，您必须拨打insertRule()两次，每个规则一次

是否可以使用insertRule（）向css添加多个规则？

1 个答案: