Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Не подключается таблица стилей 
V
    Опции темы
Ober
Дата 1.10.2012, 16:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 82
Регистрация: 11.3.2011

Репутация: нет
Всего: нет



Подскажите пожалуйста в чем проблемма, необходимо чтобы при вызове функции "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".
PM MAIL   Вверх
Aliance
Дата 1.10.2012, 17:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



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

head[0].appendChild(myLink);

PM MAIL WWW ICQ Skype   Вверх
нуп
Дата 1.10.2012, 17:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33



getElementsByTagName возвращает массив, первый элемент которого вам и нужен
PM MAIL   Вверх
Ober
Дата 1.10.2012, 17:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 82
Регистрация: 11.3.2011

Репутация: нет
Всего: нет



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

head[0].appendChild(myLink);

Спасибо, эта ошибка ушла, но появилась новая "Значением свойства addCSS или является NULL или оно не определено, или не является объектом function".
PM MAIL   Вверх
Aliance
Дата 1.10.2012, 17:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



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

пруфлинк на рабочую версию
PM MAIL WWW ICQ Skype   Вверх
Ober
Дата 1.10.2012, 17:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 82
Регистрация: 11.3.2011

Репутация: нет
Всего: нет



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

пруфлинк на рабочую версию

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

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

PM MAIL   Вверх
Aliance
Дата 1.10.2012, 17:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Действие по умолчанию для клика по ссылке - переход по заданному url. В вашем же случае, вы хотите это действие подменить вставкой файла стилей. Но чтобы действие по умолчанию не выполнилось, нужно в функции-обработчике вызвать метод preventDefault() у объекта типа Event. Если хотите об этом подробнее, то читать можно здесь. Есть более короткий, но менее правильный вариант, который указал вам я по ссылке в посту выше - поставить в качестве url знак #, таким образом перезагрузки страницы не будет и результат функции обработчика вы увидите.

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

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

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

И ещё, приучайтесь сразу писать код в нижнем регистре ;)
PM MAIL WWW ICQ Skype   Вверх
Ober
Дата 1.10.2012, 18:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 82
Регистрация: 11.3.2011

Репутация: нет
Всего: нет



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

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

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

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

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

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

Это сообщение отредактировал(а) Ober - 1.10.2012, 18:10
PM MAIL   Вверх
Ober
Дата 1.10.2012, 19:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 82
Регистрация: 11.3.2011

Репутация: нет
Всего: нет



Решилось. Все таки нужно было делать так:
Код

head.appendChild(myLink);
 
PM MAIL   Вверх
Aliance
Дата 2.10.2012, 09:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



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

все-таки нужно делать как сказал я, просто в моем примере по ссылке обращение к первому элементу массива идет при объявлении переменной, а в примере в посту при обращении. Видимо вы копировали часть от туда, часть от туда, не удалив нужные элементы.
PM MAIL WWW ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0575 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.