Как загрузиться во внешнем файле CSS динамично?
Я пытаюсь создать динамическую страницу с помощью внешних .css страниц, где цвет страницы будет изменен. Ниже мой код. Но когда я нажимаю href, Я не получаю вывода. Кто-либо может сказать то, что проблема в моем коде?
<script language="JavaScript">
function loadjscssfile(filename, filetype)
{
if (filetype=="css")
{
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("mystyle.css", "css")
</script>
<a href="javascript:loadjscssfile('oldstyle.css','css')">Load "oldstyle.css"</a>
Я изменил свой код как ниже. Тем не менее я сталкиваюсь с проблемой в том, чтобы быть произведенным. Никакой результат. Кто-либо может выручить меня?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/newstyle.css" />
<script language="JavaScript" type="text/javascript">
function loadjscssfile(filename, filetype)
{
if (filetype=="css")
{
var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = "filename";
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
loadjscssfile("oldstyle.css", "css")
</script>
<a href="javascript:loadjscssfile('oldstyle.css','css')">Load "oldstyle.css"</a>
</head>
8 ответов
Попробуйте:
var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = "filename";
document.getElementsByTagName("head")[0].appendChild(fileref)
Этот код должен работать, за исключением возможно, вы можете добавить тип = «Текст / JavaScript» в тег скрипта.
Я проверил код через Firebug, и он работал для меня.
Может быть, проблема в том, что ваша оригинальная таблица стилей по-прежнему включена в страницу и, таким образом, переопределяет стиль вашей вторичной таблицы стилей?
'Document.createelement ("ссылка «)« Создает объект Hyper Link, а не элемент CSS Style Tag (), поэтому вы не можете применить это динамически
исправить меня, если я ошибаюсь
Используйте этот код
document.getElementsByTagName("head")[0].appendChild('<link href="style.css" rel="stylesheet" type="text/css" />');
Это может работать, ваш код может работать, но из-за некоторой другой CSS он не будет отраженными.
Измените это
<a href="javascript:loadjscssfile('oldstyle.css','css')">Load "oldstyle.css"</a>
на
<a href="javascript:void(0)" onclick="loadjscssfile('oldstyle.css','css');">Load "oldstyle.css"</a>
, я верю на onClick, событие в HREF перезагрузим новый файл.
Прежде всего, вы не можете иметь якорный элемент в разделе . Во-вторых, вы уверены, что ваш путь CSS правильный? Я спрашиваю, потому что у вас уже есть ссылка на CSS / newstyle.css , но вы пытаетесь загрузить newstyle.css . Вы уверены, что это не CSS / newstyle.css ?
Редактировать: Здесь - рабочий пример вашего собственного кода. Есть что-то другое неправильно. Попробуйте статистически связать CSS и посмотрите, если вы получаете стили. Если нет, в вашем стиле могут быть ошибки.
Статически связывая таблицу стилей, я хотел бы сказать, добавьте это на вашу страницу вместо загрузки от JavaScript
<link rel="stylesheet" type="text/css" href="css/oldstyle.css" />
Ответ Тима Гудмана правильный, но вместо fileref.href = "filename"; он должен быть fileref.href = filename;
В противном случае вы пытаетесь загрузить файл с именем «filename», а не с тем, что вы передали в сценарий.
В качестве альтернативы, если вы хотите использовать библиотеку jQuery , это можно сделать одной строкой:
$ ("head"). Append (" ");
Кроме того, о первой версии вашего скрипта с использованием setAttribute: большинство браузеров принимают только setAttribute с пустой третьей параметр из-за способа настройки спецификации:
fileref.setAttribute ("href", filename, "");
Попробуйте добавить строку стиля в свой html и просто используйте @import в CSS, чтобы получить новый файл