Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/165: Рейтинг темы: голосов - 165, средняя оценка - 4.73
5 / 5 / 4
Регистрация: 20.11.2015
Сообщений: 125

Смена цвета CSS при клике по элементу

11.08.2016, 20:18. Показов 32231. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
как можно сменить свойство, например цвет фона div, при клике на другой div?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
11.08.2016, 20:18
Ответы с готовыми решениями:

Смена цвета блока при клике
При клике на кнопку, в определённом блоке должен меняться и текст внутри блока на заданный в условии, и так же, должен меняться цвет самого...

CSS, смена фона при клике на блок
Здравствуйте, подскажите пожалуйста, как в CSS сделать так, чтобы при клике на блок, поменялся фон <body>. Попробовала использовать...

Смена цвета шрифта ячейки DbGrid при клике на неё
Ребята, как сделать так, чтобы при клике на ячейку DBGrid, цвет её шрифта менялся?

8
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
11.08.2016, 20:38
Если элемент идет ниже в дереве DOM, тогда можно:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
div{
  width: 100px;
  height: 100px;
  margin:5px auto;
  background:lightblue;
}
#swcolor{
  display:none;
}
#swcolor:checked ~ .block2{
  background:red;
}
}
HTML5
1
2
3
4
5
<input id="swcolor" type="checkbox"/>
<label for="swcolor">
<div class="block1"></div>
</label>
<div class="block2"></div>
0
46 / 38 / 26
Регистрация: 11.08.2016
Сообщений: 139
11.08.2016, 21:21
Можно с JS:
HTML5
1
2
<div class="clickme" onclick=changeBg()>Нажми сюда</div>
<div class="target">Я перекрашусь</div>
JavaScript
1
2
3
function changeBg() {
    document.querySelector(".target").style.background = "#3CA11A";
};
А с jQuery и в html ничего дописывать не надо.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
11.08.2016, 21:39
crackos, так и в нативном можно html не трогать
HTML5
1
2
<div class="clickme">Нажми сюда</div>
<div class="target">Я перекрашусь</div>
JavaScript
1
2
3
document.querySelector('.clickme').onclick = function() {
  document.querySelector(".target").style.backgroundColor = "#3CA11A";
};
1
46 / 38 / 26
Регистрация: 11.08.2016
Сообщений: 139
11.08.2016, 22:03
mrtoxas, точно, спасибо, запутался немного. изначально так и хотел сделать
0
12.08.2016, 23:05

Не по теме:

Цитата Сообщение от crackos Посмотреть сообщение
изначально так и хотел сделать
Так мы тебе и поверили :D

0
12.08.2016, 23:14

Не по теме:

Stas_Garcia, можете не верить, я не заставляю :)

0
0 / 0 / 0
Регистрация: 15.12.2018
Сообщений: 2
15.12.2018, 18:56
хочу написать в js:


при нажатии на кнопку меняеться цвет div


код :

html:


div id="box1">

box1

</div>

<div input value="press me" class="button" onclick="onButton()">



</div>

js:

document.querySelector('.button').onclic k = function() {
document.querySelector("box1").style.bac kgroundColor = "#3CA11A";
};





только начинаю :/
0
204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197
15.12.2018, 19:26
вариант

HTML5
1
2
3
4
5
<div id="box1">
box1
</div>
 
<input value="press me" type="button" class="button">
JavaScript
1
2
3
document.querySelector('.button').onclick = function() {
document.querySelector("#box1").style.backgroundColor = "#3CA11A";
};
вариант

HTML5
1
2
3
4
5
<div id="box1">
box1
</div>
 
<input value="press me" type="button" class="button" onclick="onButton()">
JavaScript
1
2
3
function onButton(){
document.querySelector("#box1").style.backgroundColor = "#3CA11A";
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
15.12.2018, 19:26
Помогаю со студенческими работами здесь

Смена цвета CSS по результатам JS
Есть таблица (стандартная tr td) в html, есть массив в JS который ее заполняет. Я проверяю функцией в JS какое то условие (по принципу...

Смена цвета фона средствами css и jq
Всем привет! Помогите пожалуйста. Над задачей бьюсь третий день. Нужно сделать смену цвета блока при наведении на ссылку, которая в...

Отмена действия при клике по элементу
При нажатии по .block открывается модальной окно: &lt;div class = block&gt; &lt;div class = &quot;mini&quot;&gt;&lt;/div&gt; &lt;/div&gt; Как...

Присвоить класс элементу при клике
Здравствуйте. Нужен скрипт, который при клике на элемент (ссылка) присваивает класс css его предку (в этом классе анимация, т.е. сначала...

Добавить класс элементу списка при клике
Добрый день! Есть массив items который формируется динамически. let data = { title: &quot;My Shoping List&quot;, items: ,...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
Расскажи мне о Мире, бродяга
kumehtar 12.11.2025
— Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru