Совместимость с браузером (Javascript)

#javascript #jquery #internet-explorer #browser #compatibility

#javascript #jquery #internet-explorer #браузер #совместимость

Вопрос:

Я переписываю скрипты для сайта на обычном Javascript, чтобы ускорить выбор цвета, однако, если вы просматриваете его в Firefox и IE, он не работает (но он отлично работает в Chrome). Я просто очень надеялся получить некоторую помощь в этом:

https://www.sinister.ly/index.php

 <div id="theme_styler">
    <div class="option default" id="red"></div>
    <div class="option" id="green"></div>
    <div class="option" id="blue"></div> 
</div>
 

Конкретный код, который, по-видимому, является проблемой:

 var optionalStylesheet = document.getElementsByClassName("stylesheet_optional");
var blueStylesheet = document.getElementById("stylesheet_blue");
var greenStylesheet = document.getElementById("stylesheet_green");
var storedThemeColor = readCookie('themeColor');
var currentFiconPath;

function changeColor(path) {
    var all = document.getElementsByClassName("ficon");
    for (var i=0, max=all.length; i < max; i  ) {
        all[i].src = all[i].src.replace(/ficons/((green|blue)/)?/, 'ficons/'   path   '/');
    }
}
 

Это в заголовке:

 // AD JS

document.getElementsByClassName = function(cl) {
  var retnode = [];
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i  ) {
    if((' '   elem[i].className   ' ').indexOf(' '   cl   ' ') > -1) retnode.push(elem[i]);
  }
  return retnode;
}; 

function readCookie(name) {
var ca = document.cookie.split(';');
var nameEQ = name   "=";
for(var i=0; i < ca.length; i  ) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1, c.length); //delete spaces
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime()   (exdays*24*60*60*1000));
var expires = "expires=" d.toGMTString();
document.cookie = cname   "="   cvalue   "; "   expires;
}

var optionalStylesheet = document.getElementsByClassName("stylesheet_optional");
var blueStylesheet = document.getElementById("stylesheet_blue");
var greenStylesheet = document.getElementById("stylesheet_green");
var storedThemeColor = readCookie('themeColor');
var currentFiconPath;

function changeColor(path) {
var all = document.getElementsByClassName("ficon");
for (var i=0, max=all.length; i < max; i  ) {
        all[i].src = all[i].src.replace(/ficons/((green|blue)/)?/, 'ficons/'   path   '/');
    }
}

var gs = document.createElement("link");
gs.type = "text/css";
gs.className = "stylesheet_optional";
gs.id = "stylesheet_blue";
gs.rel = "stylesheet";
gs.title = "mystyle";
gs.href = "images/sinisterly/color_blue.css";

var bs = document.createElement("link");
bs.type = "text/css";
bs.className = "stylesheet_optional";
bs.id = "stylesheet_green";
bs.rel = "stylesheet";
bs.title = "mystyle";
bs.href = "images/sinisterly/color_green.css";

var head = document.getElementsByTagName("head")[0];
var links = head.getElementsByTagName("link");
for(var x=0; x<links.length; x  ) {
   var href = links[x].href;
    if(href.indexOf('/color_green.css') >0 || href.indexOf('/color_blue.css') >0){
      head.removeChild(links[x]);
   }
}

if (storedThemeColor == "green"){
    head.appendChild(bs);
} else if (storedThemeColor == "blue") {
    head.appendChild(gs);
} 

// End AD JS
 

И это в нижнем колонтитуле

 if (storedThemeColor == null) {
    setCookie('themeColor', 'default', 7);
    currentFiconPath = '';
    return currentFiconPath;
} else if (storedThemeColor != null) {
    if (storedThemeColor == 'default') {
        currentFiconPath = '';
        optionalStylesheet.disabled = true;
        return currentFiconPath;
    } else if (storedThemeColor == 'blue') {
        currentFiconPath = "blue";
        changeColor(currentFiconPath);
        optionalStylesheet.disabled = true;
        blueStylesheet.disabled = false;
        return currentFiconPath;
    } else if (storedThemeColor == 'green') {
        currentFiconPath = "green";
        changeColor(currentFiconPath);
        optionalStylesheet.disabled = true;
        greenStylesheet.disabled = false;
        return currentFiconPath;
    }
}
 

Комментарии:

1. Не могли бы вы объяснить, что он должен делать и что происходит вместо этого? И есть ли какие-либо соответствующие выходные данные с консолей JS?

2. Можете ли вы создать jsfiddle, который просто содержит код проблемы и демонстрирует проблему?

3. Обратите внимание, # это оператор в селекторах CSS, который getElementById() на самом деле не используется. Аргумент должен точно соответствовать значению id атрибута.

4. Извините, ребята, я подумал, что вы проверите это в браузерах, ха-ха. Я имею в виду, что это не меняет каталог для ficons. Это гораздо проще объяснить визуально, чем добавлять текст.

5. Послушайте, я новичок на сайте, поэтому, пожалуйста, перестаньте быть таким резким и умным. Очевидно, что, глядя на функцию «changeColor», она предназначена для изменения цвета. Итак, в правом верхнем углу щелкните между цветами и обратите внимание, что это не меняет цвета значков. Я действительно ценю помощь, но не агрессию.

Ответ №1:

Изменение:

 var blueStylesheet = document.getElementById("#stylesheet_blue");
var greenStylesheet = document.getElementById("#stylesheet_green");
 

Для:

 var blueStylesheet = document.getElementById("stylesheet_blue");
var greenStylesheet = document.getElementById("stylesheet_green");
 

# В начале идентификаторов таблиц стилей нет.

Я не знаю, почему это работает в Chrome — когда я пытаюсь это сделать, я попадаю undefined в Chrome.

Комментарии:

1. Я сделал это, это не решило проблему.