Как динамически загрузить внешний CSS-файл? - PullRequest
Новая
       3

Как динамически загрузить внешний CSS-файл?

11 голосов
/ 20 января 2010

Я пытаюсь создать динамическую страницу, используя внешние страницы .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 ]

16 голосов
/ 20 января 2010

Попробуйте это: 

var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = "filename";
document.getElementsByTagName("head")[0].appendChild(fileref)
11 голосов
/ 14 февраля 2010

Тим Гудман ответит правильно, но вместо fileref.href = "filename"; должно быть fileref.href = filename;

В противном случае вы пытаетесь загрузить файл с именем «filename», а не с тем, который вы передали в сценарий.

В качестве альтернативы, если вы хотите использовать библиотеку jQuery , это можно сделать в одну строку:
$("head").append("<link rel='stylesheet' id='extracss' href='"+filename+"' type='text/css' />");

Кроме того, о первой версии вашего скрипта с использованием setAttribute: большинство браузеров принимают setAttribute только с пустым третьим параметром из-за способа установки спецификации:
fileref.setAttribute("href", filename, "");

1 голос
/ 03 марта 2010

Попробуйте добавить строку стиля в html и просто используйте @import в css, чтобы получить новый файл

0 голосов
/ 20 января 2010

Прежде всего, вы не можете иметь элемент привязки в разделе <head>. Во-вторых, вы уверены, что ваш CSS-путь правильный? Я спрашиваю, потому что у вас уже есть ссылка на css/newstyle.css, но вы пытаетесь загрузить newstyle.css. Вы уверены, что это не css/newstyle.css?

Редактировать: Здесь - рабочий пример вашего собственного кода. Есть что-то еще не так. Попробуйте статически связать CSS и посмотрите, получаете ли вы стили. Если нет, то в вашей таблице стилей могут быть ошибки.

Статически связывая таблицу стилей, я хотел сказать добавить это на своей странице вместо загрузки из javascript 

<link rel="stylesheet" type="text/css" href="css/oldstyle.css" />
0 голосов
/ 20 января 2010

Измените это 

<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>

Я верю, что онклик, событие href перезагрузит новый файл.

0 голосов
/ 20 января 2010

Используйте этот код 

document.getElementsByTagName("head")[0].appendChild('<link href="style.css" rel="stylesheet" type="text/css" />');

это может работать, ваш код может работать, но из-за какого-то другого CSS он не будет отражен.

0 голосов
/ 20 января 2010

Этот код должен работать, за исключением того, что, возможно, вы захотите добавить type = "text / javascript" к тегу скрипта.

Я протестировал код с помощью Firebug, и он работал для меня.* Может быть, проблема в том, что ваша исходная таблица стилей все еще включена в страницу и, таким образом, переопределяет стиль вашей вторичной таблицы стилей?

0 голосов
/ 20 января 2010

document.createElement ("link") 'создает объект гиперссылки, а не элемент css style tag (), поэтому вы не можете применить это динамически

исправьте меня, если я ошибаюсь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...