添加规则/插入规则无法正常工作

addRule / insertRule Not working locacly

本文关键字：规则 常工作 工作 插入 添加      更新时间：2023-09-26

我正在构建一个javascript图像滑块，并注意到在chrome中本地拉起index.html文件时出现问题。这是我的代码

(function(){ //slider container
    var slider = document.getElementById('slider');
    var figure = slider.childNodes[1];
    var slidyImgs = figure.getElementsByTagName('IMG');
    var figureWidth = slidyImgs.length * 100;
    var slidyImgsWidth = 100 / slidyImgs.length;
    css('#slider figure{ width: '+figureWidth+"%; }"); 
    css('#slider figure img{ width: '+slidyImgsWidth+"%; }");
    var xPos = 100;
    setInterval(function(){
        figure.style.marginLeft = "-" + xPos + "%";
        xPos = (xPos === (figureWidth - 100)) ? 0 : xPos + 100;
    },7000);
})()
function css(newrule) { //adds a new style to stylesheet
    var styles = document.styleSheets[1]
    try { 
        styles.insertRule(newrule, styles.cssRules.length);
    } catch(err) {
        try { styles.addRule(newrule); }catch(err){} //IE
    };
};

当我在本地打开文件时，似乎没有应用插入规则。但是当我在服务器上打开它时，插入规则显示为正常。任何人都知道是什么原因造成的

您可以在我的服务器上查看网站/源代码：http://magnetwd.com/kellin/

我会做这样的事情（如果 jQuery 不是一个选项）

function addStylesBySelector(sel, newStyles) {
    var els = document.querySelectorAll(sel)
    for (var i = 0; i < els.length; i++) {
        for (var k in newStyles) {
            els[i].style[k] = newStyles[k];
        }
    }
}

用法：

addStylesBySelector('#slider figure', {"width": figureWidth + "%"})

那么显然，您可以为第二个参数添加的不仅仅是width。

相关文章：