类型“ StyleSheet”上不存在属性“ addRule”和“ insertRule”

Question

类型“ StyleSheet”上不存在属性“ addRule”和“ insertRule”

我有如下的打字稿代码：-

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);
    }
}

Run Code Online (Sandbox Code Playgroud)

这段代码在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>

Run Code Online (Sandbox Code Playgroud)

我在Typescript中遇到错误（上面的第一个代码段）：-

一种。类型“ StyleSheet”上不存在属性“ addRule”

b。类型“ StyleSheet”上不存在属性“ insertRule”

Answer 1

Mis*_*saz 8

这是因为类型StyleSheet确实缺少addRule和insertRule方法。这些方法是在CSSStyleSheet类型上定义的。

您可以说您确实知道该类型脚本，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);
}

Run Code Online (Sandbox Code Playgroud)

替代语法

if (isIE) {
    (<CSSStyleSheet>getRootDocument().styleSheets[0]).addRule(cssString, num.toString());
} else {
    (<CSSStyleSheet>getRootDocument().styleSheets[0]).insertRule(cssString);
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	2783 次
最近记录：	8 年，6 月前