个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
26
4
我有如下 typescript 代码:-
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>我在 Typescript 中遇到错误(上面的第一个代码片段):-
一个。 “StyleSheet”类型上不存在属性“addRule”
“StyleSheet”类型上不存在属性“insertRule”
最佳答案
这是因为 StyleSheet 类型确实缺少 addRule 和 insertRule 方法。这些方法在 CSSStyleSheet 类型上定义。
你可以说 typescript 你真的知道类型是 CSSStyleSheet 而不是预测的 StyleSheet 通过强制打字并在 addRule 调用中添加对 num 的 .toString 调用(因为打字它需要)。
有 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);
}
关于javascript - 类型 'addRule' 上不存在属性 'insertRule' 和 'StyleSheet'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44897499/
26
4
0
啊!我的网站在 Chrome 中损坏了。 在控制台中获取此消息:Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSh
我正在尝试将新样式元素添加到 HTML 中。我目前正在使用这篇博客文章中的代码片段 http://davidwalsh.name/add-rules-stylesheets 当它在 codepen 中
如果我使用不带关键帧的 CSS，insertRule 可以正常工作，一切都很完美。但是，如果我使用包含关键帧的 CSS，则会出现错误: Failed to execute 'insertRule' o
我可以使用 : 成功地“取消”所有包含“:before {content:}”的规则 document.styleSheets[0].insertRule('.main *:before {conte
我有 Javascript 代码，修改自“Javascript:权威指南”(第 442-444 页或 kindle 位置 14998)，它创建一个 CSS 样式表并插入规则。但我发现使用它提倡的标准化
我正在构建一个 javascript 图像 slider ，并注意到在 chrome 中本地拉取 index.html 文件时出现问题。这是我的代码 (function(){ //slider con
我不知道我哪里错了:/。当我运行这段代码时，我得到的只是一个空白元素。我似乎无法让 insertRule 方法执行任何操作(甚至不产生错误)。我错过了什么吗？ Test v
我有一个 HTML5 游戏已经运行了好几个星期了。 突然，大约一个小时前，它将不再在 Chrome 中运行。我将问题缩小为仅在 Chrome 中发生的 JavaScript 错误。 我在这里隔离了上述
我希望使用 insertRule 通过 Javascript 更改导航元素的 :hover 样式。导航链接的背景颜色将根据 bgndImgIndex 发生变化。这可以用 Javascript 实现还是
假设我插入这样的规则: var style = document.createElement("style") style.appendChild(document.createTextNode(""
你好，这是 HTML 代码 Karan's test function functionItalic(pasteEvent
我已经阅读了有关使用 Javascript 插入 css 规则的内容，并设法使其正常工作(经过一些试验和错误)。所以我有两个问题: Q.1 为什么索引 的克隆部分文档 有 3 styleSheets
我正在尝试使用 JS 创建样式表并附加一些规则，但它不会工作。 if (style == null) { var style = document.createElement('style');
我目前正在编写一个简单的 jQuery 插件，我需要将大约 30 到 40 条规则插入到单个样式表标记中，现在我使用的当前代码是由另一个 StackOverflow 用户编写的。它完成了这项工作，但它
我有一个标签，其内容已使用 insertRule 动态添加功能。我想检索相关样式的文本内容 我试过 document.getElementById('style').innerHTML 和 docum
我目前有 3 个输入，它们是颜色选择器。 然后我写了一些 javascript 来找到其中的每一个并更新标题中的样式: const input = document.querySelectorA
我正在学习如何使用 JavaScript 使 CSS 更加动态，但由于某种原因，此处的代码无法正常工作。我在 Visual Studio 中开发，IntelliSense 甚至没有向我显示 inser
是否可以使用 addRule 或 insertRule 来传递 id 选择器？即: document.styleSheets[1].addRule('div #3', 'font: 14px verd
我的应用程序在服务器代码中动态生成动画。对于要设置动画的元素，我在内联应用动画样式，如下所示(元素 ID 是带有字母前缀以防止冲突的 GUID): This is a te
我在使用此代码的 Internet Explorer 11 中遇到“IndexSizeError”错误: var style = document.createElement('style'); do
我是一名优秀的程序员,十分优秀！