我有类似下面的打字稿代码: -
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>
&#13;
我在Typescript中遇到错误(上面的第一个代码片段): -
一个。物业&#39; addRule&#39;类型&#39; StyleSheet&#39;
上不存在湾Property&#39; insertRule&#39;类型&#39; StyleSheet&#39;
上不存在答案 0 :(得分:7)
这是因为类型StyleSheet
实际上缺少addRule和insertRule方法。这些方法在CSSStyleSheet
类型上定义。
你可以通过在addRule调用中强制打字并在num上添加.toString调用来表示你真正知道类型为CSSStyleSheet
而不是预测StyleSheet
的打字稿(因为它需要打字)。
有两种可能的语法怎么做。
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);
}