为了账号安全,请及时绑定邮箱和手机立即绑定

insertRule无法注入的问题


 $(()=>{        console.log("页面加载完执行");        var style = document.styleSheets[0];//获取页面加载样式表                //查找元素        var $marquee = $('.marquee');        var $content = $marquee.find('.content');//找到类名为content的元素        var $list = $content.find('.list');//找到类名为list的元素        var outerWidth=300,            outerHeight=327,            speed=4;        var $list = $content.find('.list');//        var listlength = $list.length;//list的个数        var contentWidth=outerWidth*listlength;//content的宽度               //js设置 marquee的css样式        $marquee.css({            "width":`${outerWidth}px`,            "height":`${outerHeight}px`        });         //js设置 content的css样式         $content.css({            'width':`${contentWidth}px`,//设置宽度            'height':`${outerHeight}px`,            'animation':`run ${speed*listlength}s linear infinite`        });         //js设置 list的css样式        $list.css({            'width':`${outerWidth}px`,            'height':`${outerHeight}px`        });                // 给样式表注入一个规则        style.insertRule(`@keyframes run{            100%{                transform: translateX(-${contentWidth}px);            }        }`)            })


正在回答

3 回答

==是比较运算符,一个=号是赋值

kxfygmfqm

0 回复 有任何疑惑可以回复我~

insertRule 规则无法注入的 我是这样解决的:

var style = document.styleSheets[0];

style.insertRule(`@keyframes run {100%{transform:translateX(-${contentWidth}px);}} `)
把这个删了,在marquee.css里面把动画帧加上就得了:
@keyframes run {
    100%{
        transform:translateX(-2400px);
    }
}


0 回复 有任何疑惑可以回复我~
$(() => {
    console.log("页面加载完执行");
    var style = document.styleSheets[0];//获取页面加载样式表
    // 查找元素
    var $marquee = $('.marquee');
    var $content = $marquee.find('.content');//找到类名为content的元素
    var $list = $content.find('.list');//找到类名为list的元素
    var outerWidth = 300, outerHeight = 327, speed = 4;
    var listlength = $list.length;//list的个数
    var contentWidth = outerWidth * listlength;//content的宽度
    // js设置 marquee的css样式
    $marquee.css({
        "width": `${outerWidth}px`,
        "height": `${outerHeight}px`
    });
    //js设置 content的css样式
    $content.css({
        'width': `${contentWidth}px`,//设置宽度
        'height': `${outerHeight}px`,
        'animation': `run ${speed * listlength}s linear infinite`
    });
    //js设置 list的css样式
    $list.css({
        'width': `${outerWidth}px`,
        'height': `${outerHeight}px`
    });
    // 给样式表注入一个规则
    style.insertRule(`
        @keyframes run {
            100% {
                transform: translateX(-${contentWidth}px);
            }
        }
    `)
})

整理了一下格式,尝试了一下是没有问题的呀。

请题主给些别的信息。


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

insertRule无法注入的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信