#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. Я сделал это, это не решило проблему.