类型“StyleSheet”上不存在属性“addRule”和“insertRule”
Posted
技术标签:
【中文标题】类型“StyleSheet”上不存在属性“addRule”和“insertRule”【英文标题】：Property 'addRule' and 'insertRule' does not exist on type 'StyleSheet' 【发布时间】：2017-12-07 10:14:13 【问题描述】：我有如下打字稿代码：-
export function getRootWindow():Window
return window.top;
export function getRootDocument():htmlDocument
return getRootWindow().document;
declare global
interface Document
documentMode?: any;
export function isBrowserIE()
return getRootDocument().documentMode;
export function addCssRule(cssString:string, num:number)
let isIE = isBrowserIE();
if(getRootDocument().styleSheets[0] == undefined)
let head = getRootDocument().head || getRootDocument().getElementsByTagName('head')[0];
let style = getRootDocument().createElement('style');
head.appendChild(style);
if(isIE)
getRootDocument().styleSheets[0].addRule(cssString,num);
else
getRootDocument().styleSheets[0].insertRule(cssString,num);
这段代码在 javascript 中运行良好：-
<!DOCTYPE html>
<html>
<head>
</head>
<body style="color: #fff; font-family: arial, sans-sarif; background-color: #333; text-align: center;">
<h2>My mute speaker</h2>
<a href="#" class="datawrkz_speaker">
<span></span>
</a>
<script>
if(document.styleSheets[0] == undefined)
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
head.appendChild(style);
var datawrkz_speaker = document.getElementsByClassName("datawrkz_speaker")[0];
datawrkz_speaker.addEventListener("click", function()
this.classList.toggle("mute");
);
function addCssRule(cssString, num)
var isIE = /*@cc_on!@*/false || !!document.documentMode;
if(isIE)
document.styleSheets[0].addRule(cssString, num);
else
document.styleSheets[0].insertRule(cssString,num);
// set css rules as below for mute button
addCssRule(".datawrkz_speaker height: 30px; width: 30px; position: relative; overflow: hidden; display: inline-block; ", 0);
addCssRule(".datawrkz_speaker span display: block; width: 8px; height: 8px; background: #fff; margin: 11px 0 0 2px; ", 1);
addCssRule(".datawrkz_speaker span:after content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent #fff transparent transparent; border-width: 10px 14px 10px 15px; left: -13px; top: 5px;", 2);
addCssRule(".datawrkz_speaker span:before transform: rotate(45deg); border-radius: 0 50px 0 0; content: ''; position: absolute; width: 5px; height: 5px; border-style: double; border-color: #fff; border-width: 7px 7px 0 0; left: 18px; top: 9px; transition: all 0.2s ease-out; ", 3);
addCssRule(".datawrkz_speaker:hover span:before transform: scale(0.8) translate(-3px, 0) rotate(42deg); ", 4);
addCssRule(".datawrkz_speaker.mute span:before transform: scale(0.5) translate(-15px, 0) rotate(36deg); opacity: 0; ", 5);
</script>
</body>
</html>我在 Typescript 中遇到错误（上面的第一个代码 sn-p）：-
一个。类型“StyleSheet”上不存在属性“addRule”
b.类型“StyleSheet”上不存在属性“insertRule”
【问题讨论】：
这是一个编译器错误。在 IDE 中它显示 CSSStyleSheet，但在编译时它使用 StyleSheet，它没有方法。如果您遇到转换错误，请将其转换为 any 然后 CSSStyleSheet（即 document.styleSheets[0] as any as CSSStyleSheet） 【参考方案1】：这是因为 StyleSheet 类型确实缺少 addRule 和 insertRule 方法。这些方法是在CSSStyleSheet 类型上定义的。
你可以说 typescript 你真的知道类型是CSSStyleSheet，而不是预测的StyleSheet，方法是强制打字并在 addRule 调用中对 num 添加 .toString 调用（因为它需要打字）。
有两种可能的语法来做到这一点。
if (isIE)
(getRootDocument().styleSheets[0] as CSSStyleSheet).addRule(cssString, num.toString());
else
(getRootDocument().styleSheets[0] as CSSStyleSheet).insertRule(cssString, num);
替代语法
if (isIE)
(<CSSStyleSheet>getRootDocument().styleSheets[0]).addRule(cssString, num.toString());
else
(<CSSStyleSheet>getRootDocument().styleSheets[0]).insertRule(cssString);
【讨论】：
类型断言对我有用。做的有点不对。以上是关于类型“StyleSheet”上不存在属性“addRule”和“insertRule”的主要内容，如果未能解决你的问题，请参考以下文章