Menu
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 :-
<!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):-
a. Property 'addRule' does not exist on type 'StyleSheet'
b. Property 'insertRule' does not exist on type 'StyleSheet'
561
It is because type StyleSheet is realy missing addRule and insertRule methods. These methods are defined on CSSStyleSheet type.
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).
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
