プロパティ '追加ルール' と 'insertRule' タイプに存在しません 'スタイルシート'

私はtypescriptですコード以下のように持っている： -プロパティ '追加ルール' と '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); 
 
    } 
 
}

このコードは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 = /*@[email protected]*/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でエラーが発生しています（上記の最初のコードスニペット）： -

a。プロパティ 'addRule'が 'StyleSheet'型に存在しません

b。プロパティ 'insertRule'がタイプ 'StyleSheet'に存在しません

出典

2017-07-04 MiHawk

これは、タイプStyleSheetには本当にaddRuleメソッドとinsertRuleメソッドがないためです。これらの方法はCSSStyleSheetタイプで定義されています。

は、あなたが本当にその型を知っているtypescriptですが、タイピングを強制し、（タイピングそれが必要になるため）追加ルールコールでNUMに.toString呼び出しを追加することによりCSSStyleSheet代わりの予測StyleSheetであることを特徴とすることができます。

これには2つの構文があります。

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

出典

2017-07-04 11:59:43 Misaz

型アサーションは私のために働きました。やや間違ってやっていた。 – MiHawk

プロパティ '追加ルール' と 'insertRule' タイプに存在しません 'スタイルシート'

答えて

関連する問題