Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Не подключается таблица стилей


Автор: Ober 1.10.2012, 16:20
Подскажите пожалуйста в чем проблемма, необходимо чтобы при вызове функции "addCSS()" на текущей странице устанавливался стиль находящийся в css/main.css но нижеприведенный код не работает.
Код

<script type="text/javascript">
function addCSS()
{
    var head  = document.getElementsByTagName("head");
    var myLink  = document.createElement("link");
    myLink.rel  = "stylesheet";
    myLink.type = "text/css";
    myLink.href = "css/main.css";
    head.appendChild(myLink);
}
</script>


вот сам вызов функции:
Код

<A HREF="" onСlick=addCSS()>Лабораторная работа №8</A>


При вызове выбивает ошибку, о том что "head" не поддерживает функцию "appendChild".

Автор: Aliance 1.10.2012, 17:06
getElementsByTagName - возвращает коллекцию элементов, поэтому нужно обращаться к первому.
Код

head[0].appendChild(myLink);

Автор: нуп 1.10.2012, 17:07
getElementsByTagName возвращает массив, первый элемент которого вам и нужен

Автор: Ober 1.10.2012, 17:15
Цитата(Aliance @ 1.10.2012,  17:06)
getElementsByTagName - возвращает коллекцию элементов, поэтому нужно обращаться к первому.
Код

head[0].appendChild(myLink);

Спасибо, эта ошибка ушла, но появилась новая "Значением свойства addCSS или является NULL или оно не определено, или не является объектом function".

Автор: Aliance 1.10.2012, 17:23
Если пишет addCSS is not a function(), то это значит, что скрипт не видит функцию. Выложите целиком код.

http://jsfiddle.net/Aliance/7ezua/

Автор: Ober 1.10.2012, 17:40
Цитата(Aliance @ 1.10.2012,  17:23)
Если пишет addCSS is not a function(), то это значит, что скрипт не видит функцию. Выложите целиком код.

http://jsfiddle.net/Aliance/7ezua/

Вот часть основного кода я убрал записи не имеющие отношения к скрипту:
Код

<HTML>
<HEAD>
<TITLE>лаб 8</TITLE>
<script type="text/javascript" href="my.js"></script>
</HEAD>
<BODY>
<A HREF="" onclick=addSCC()>лабораторная работа 8</A
</BODY>
</HTML>


Содержимое файла my.js
Код

function addCSS()
{
    var head  = document.getElementsByTagName("head");
    var myLink  = document.createElement("link");
    myLink.rel  = "stylesheet";
    myLink.type = "text/css";
    myLink.href = "css/main.css";
    head[0].appendChild(myLink);
}


содержание файла main.css
Код

body{ BACKGROUND-COLOR: Silver; FONT-SIZE: 12pt; FONT-FAMILY: Arial Black;
margin-left: 10%; margin-top: 10%  }
p:first-letter{ COLOR: white; TEXT-ALIGN: justify }
A:link{ COLOR: Red }
A:hover{ COLOR: blue; font-size: 30pt; font-style: italic }
A:visited{ COLOR: Black }

Автор: Aliance 1.10.2012, 17:55
Действие по умолчанию для клика по ссылке - переход по заданному url. В вашем же случае, вы хотите это действие подменить вставкой файла стилей. Но чтобы действие по умолчанию не выполнилось, нужно в функции-обработчике вызвать метод preventDefault() у объекта типа Event. Если хотите об этом подробнее, то читать можно http://forum.vingrad.ru/topic-32350.html. Есть более короткий, но менее правильный вариант, который указал вам я по ссылке в посту выше - поставить в качестве url знак #, таким образом перезагрузки страницы не будет и результат функции обработчика вы увидите.

Возможно проблема в этом, что у вас идет переход на указанный в ссылке url (а пустой url = текущему) из-за этого не работает. Попробуйте вставить решетку и посмотрим что выходит.

Далее, если не сработает, возможно файл скрипта не виден из документа? Уверены в обратном? Можно проверить подставив alert перед определением функции скажем.

Пробовали открывать мою ссылку? Работает?

И ещё, приучайтесь сразу писать код в нижнем регистре ;)

Автор: Ober 1.10.2012, 18:04
Цитата(Aliance @ 1.10.2012,  17:55)
Действие по умолчанию для клика по ссылке - переход по заданному url. В вашем же случае, вы хотите это действие подменить вставкой файла стилей. Но чтобы действие по умолчанию не выполнилось, нужно в функции-обработчике вызвать метод preventDefault() у объекта типа Event. Если хотите об этом подробнее, то читать можно http://forum.vingrad.ru/topic-32350.html. Есть более короткий, но менее правильный вариант, который указал вам я по ссылке в посту выше - поставить в качестве url знак #, таким образом перезагрузки страницы не будет и результат функции обработчика вы увидите.

Возможно проблема в этом, что у вас идет переход на указанный в ссылке url (а пустой url = текущему) из-за этого не работает. Попробуйте вставить решетку и посмотрим что выходит.

Далее, если не сработает, возможно файл скрипта не виден из документа? Уверены в обратном? Можно проверить подставив alert перед определением функции скажем.

Пробовали открывать мою ссылку? Работает?

И ещё, приучайтесь сразу писать код в нижнем регистре ;)

Да, в вашей ссылке все работает. Я тоже думаю, что он не видит скрипт. Сейчас буду что-то исправлять.
Хотя при подстановке alert(); она выполняется. Но теперь пишет о том, что "Не удалось получить значение свойства appendChild"

Автор: Ober 1.10.2012, 19:11
Решилось. Все таки нужно было делать так:
Код

head.appendChild(myLink);
 

Автор: Aliance 2.10.2012, 09:27
Цитата(Ober @  1.10.2012,  20:11 Найти цитируемый пост)
Все таки нужно было делать так:

все-таки нужно делать как сказал я, просто в моем примере по ссылке обращение к первому элементу массива идет при объявлении переменной, а в примере в посту при обращении. Видимо вы копировали часть от туда, часть от туда, не удалив нужные элементы.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)