jjzjj

javascript - 类型 'addRule' 上不存在属性 'insertRule' 和 'StyleSheet'

coder 2025-03-05 原文

我有如下 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/

amp39getRootDocumentsectiondatawrkz_speakerjavascriptcsstypescript

有关javascript - 类型 'addRule' 上不存在属性 'insertRule' 和 'StyleSheet'的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  6. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  7. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  8. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  9. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  10. ruby - Infinity 和 NaN 的类型是什么？ - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

随机推荐