addRule/insertRule Не работает locacly

Я создаю слайдер изображения javascript и заметил проблему, потянув файл index.html локально в chrome. Вот мой кодaddRule/insertRule Не работает locacly

(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 
    }; 
};

Когда я открываю файл локально, insertRule, похоже, не применяется. Но когда я открываю его на своем сервере, insertRule выглядит как обычно. Кто есть какие-либо идеи причиняет это

вы можете просмотреть исходный код сайта/на моем сервере: http://magnetwd.com/kellin/

источник

2014-12-23 magreenberg

Я угадываю проблему между доменами, но единственный способ сказать наверняка - удалить попытку/улов локально, потому что прямо сейчас вы полностью подавляете любые ошибки, которые могут произойти. – Jack

Я получаю сообщение об ошибке для styles.cssRules.length. Он говорит, что не может читать длину null. Поэтому Chrome говорит, что document.styleSheets [1] возвращает пустую таблицу стилей. Но почему? – magreenberg

Недостаточно информации, чтобы сказать наверняка. Я предполагаю, что JS загружается с другого хоста, чем остальная часть страницы ... поэтому браузер не позволит вам получить доступ. Здесь есть последствия для безопасности, потому что вы можете узнать информацию о пользователе, изучив правила. Почему вы идете по этому маршруту, а не просто прикрепляете стили напрямую? – Jack

Я хотел бы сделать что-то вроде этого вместо (если 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 для второго аргумента.

источник

2014-12-24 00:08:59 Jack

addRule/insertRule Не работает locacly

ответ

Смежные вопросы