Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
Liori
4 / 4 / 5
Регистрация: 30.08.2012
Сообщений: 155
1

Связь кода JS и CSS

11.07.2015, 15:42. Просмотров 1000. Ответов 7
Метки нет (Все метки)

Не могу понять, как сделать следующее. У меня есть код html, с помощью него пользователь выбирает в элементе radio один из вариантов закрашивания фона (цвет). После этого нажимает кнопку подтверждения. Есть отдельно код с текущим CSS-стилем и отдельно JS код, в котором есть другие инструкции, не относящиеся к данной проблеме. В JS у меня есть связь с кодом html (с событием кликания на кнопку подтверждения),т.е. с помощью alert() выводится цвет, который выбрал пользвоатель. Но как тут применить CSS, как сделать так, чтобы в зависимости от выбранного цвета этим цветом закрашивался фон(background-color)? Вопрос, возможно, глупый, но я совсем новичок в вебе. Заранее спасибо

Добавлено через 10 минут
Т.е. как сделать это в стиле
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
switch(выбранный цвет)
{
   case "green" :
      background-color:#(green);
      break;
case "blue" :
      background-color:#(blue);
      break;
case "black" :
      background-color:#(black);
      break;
}
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.07.2015, 15:42
Ответы с готовыми решениями:

Спарсить текст кода css и/или less файла подключаемого через тег link
Хорошо ответьте пока что на второй вопрос - как спарсить текст кода css и/или...

связь html и css
начал изучать css такой простенький пример, но я не понимаю почему он у меня...

C++ Связь управляемого кода с обычным
Всем добрый день. Пишу графическое приложение (редактор карт для игры) на...

Оптимизация CSS-кода
Есть пара классов: .class-1{ width: 50px; height: 100px; background:...

Оптимизация css кода
Здравствуйте! Есть записи на сайте, которые требуют индивидуальную...

7
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
11.07.2015, 15:52 2
Лучший ответ Сообщение было отмечено Liori как решение

Решение

Liori, пример в песочнице
HTML5
1
2
3
<input type="radio" name="bgcolor" value="#060">Зеленый<br>
<input type="radio" name="bgcolor" value="#036">Синий<br>
<input type="radio" name="bgcolor" value="#f00">Красный<br>
Javascript
1
2
3
4
5
6
var inp = document.getElementsByName('bgcolor');
for(var i = 0; i < inp.length; i++) {
    inp[i].addEventListener('change', function(){
        document.body.style.backgroundColor = this.value;
    }, false);
}
Добавлено через 3 минуты
Допустимо писать некоторые значения цветов на английском. При этом, менять что-то в JS не нужно
1
Liori
4 / 4 / 5
Регистрация: 30.08.2012
Сообщений: 155
11.07.2015, 16:13  [ТС] 3
Lazy_Den, таким образом, как я понимаю, можно изменять значение любого свойства? Не только цвет?
И нельзя ли это как-то сделать, подключая в код JS скрипт CSS?
Типа
Javascript
1
2
3
4
5
6
<style type="text/css">
   body
   {
      background-color:#000000;
   }
</style>
0
Lazy_Den
2947 / 2621 / 1322
Регистрация: 15.01.2014
Сообщений: 5,758
11.07.2015, 16:16 4
Цитата Сообщение от Liori Посмотреть сообщение
можно изменять значение любого свойства?
Да.
Цитата Сообщение от Liori Посмотреть сообщение
как-то сделать, подключая в код JS скрипт CSS?
Даже представляю себе сложно подобное. В JS можно добавлять/менять/удалять классы у элементов, а стили классов, могут быть заранее прописаны в css-файле.
0
sash
73 / 74 / 46
Регистрация: 09.10.2014
Сообщений: 510
11.07.2015, 22:12 5
Liori, давай по порядку от а до б двигайся, а то так ты с форума не вылезешь никогда ( не в обиду )
https://learn.javascript.ru
0
Liori
4 / 4 / 5
Регистрация: 30.08.2012
Сообщений: 155
11.07.2015, 23:27  [ТС] 6
sash, хех Я понимаю, что желательно двигаться плавно от одной темы к другой - читаю довольно хорошие книги, видеоуроки смотрю, придумываю сама себе мини-задания. Но вот пришла в голову идея и просто невероятно захотелось её реализовать (только что таки это сделала, небольшая проблемка только с регулярками ещё осталась)
0
sash
73 / 74 / 46
Регистрация: 09.10.2014
Сообщений: 510
12.07.2015, 00:03 7
Какая, может, помогу
0
Liori
4 / 4 / 5
Регистрация: 30.08.2012
Сообщений: 155
12.07.2015, 00:18  [ТС] 8
sash, вот я создала темы
Не работает правильно рег.выражение
Как запомнить часть рег.выражения?

Хочу просто чтобы все данные вводились в одном поле (а не в 3-х, как сейчас, и с помощью регулярок уже проверялась их корректность), но мой код не работает
0
12.07.2015, 00:18
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.07.2015, 00:18

Форматирование html/css/js кода
Добрый день. Кто знает, есть какое-нибудь расширение/библиотека или еще...

Изменение кода с XPath на CSS
Здравствуйте! Для примера написал вот такой скрипт с использованием XPath:...

Удалить из кода подключение css
Доброго времени суток. Прошу сильно не пинать, я в программировании не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru