'StyleSheet'类型中不存在属性'addRule'和'insertRule'
[英]Property 'addRule' and 'insertRule' does not exist on type 'StyleSheet'
问题描述
I have typescript code like below :- 
我有类似下面的打字稿代码： -
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); } }
This code works fine in javascript :- 此代码在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>
I am getting errors in Typescript (first code snippet above):- 我在Typescript中遇到错误（上面的第一个代码片段）： -
a. 一个。 Property 'addRule' does not exist on type 'StyleSheet' 'StyleSheet'类型中不存在属性'addRule'
b. 湾 Property 'insertRule' does not exist on type 'StyleSheet' 'StyleSheet'类型中不存在属性'insertRule'
1 个解决方案
解决方案1
8 已采纳 2017-07-04 11:59:43
It is because type StyleSheet is realy missing addRule and insertRule methods. 这是因为StyleSheet类型实际上缺少addRule和insertRule方法。 These methods are defined on CSSStyleSheet type. 这些方法在CSSStyleSheet类型上定义。
You can said typescript that you realy know that type is CSSStyleSheet instead of predicted StyleSheet by forcing typings and adding .toString call on num in addRule call (because typings it requires). 您可以说通过强制打字并在addRule调用中对num添加.toString调用来确定类型是CSSStyleSheet而不是预测的StyleSheet的打字稿（因为它需要打字）。
Therea are 2 possible syntax how to do it. 有两种可能的语法怎么做。
if (isIE) {
(getRootDocument().styleSheets[0] as CSSStyleSheet).addRule(cssString, num.toString());
} else {
(getRootDocument().styleSheets[0] as CSSStyleSheet).insertRule(cssString, num);
}
alternative syntax 替代语法
if (isIE) {
(<CSSStyleSheet>getRootDocument().styleSheets[0]).addRule(cssString, num.toString());
} else {
(<CSSStyleSheet>getRootDocument().styleSheets[0]).insertRule(cssString);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.