Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
1

Фиксация цвета текста на кнопке

27.12.2015, 19:40. Просмотров 987. Ответов 9
Метки нет (Все метки)

Здравствуйте.
Сейчас в коде ниже, при нажатии на кнопку фиксируется её цвет. (кнопок неограниченное кол-во)

Помогите пожалуйста фиксировать еще и нужный цвет текста на кнопке.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function myFunc (btn)
{
var CLR = btn.getAttribute ('clr').split ('*');
if (CLR.length == 2) btn.setAttribute ('clr', CLR [0]), btn.style.background = '';
else btn.setAttribute ('clr', CLR [0] + '*'), btn.style.background = CLR [0];
}
</script>
 
<p><input type="button" value="1" onclick="myFunc (this)" clr="red">
<p><input type="button" value="2" onclick="myFunc (this)" clr="orange">
<p><input type="button" value="3" onclick="myFunc (this)" clr="yellow">
<p><input type="button" value="4" onclick="myFunc (this)" clr="green">
<p>...
<p><input type="button" value="10" onclick="myFunc (this)" clr="violet">
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.12.2015, 19:40
Ответы с готовыми решениями:

Фиксация цвета кнопок
Здравствуйте. Есть десяток кнопок. После нажатия на любую кнопку зафиксировать её цвет. Да...

Фиксация цвета кнопок
Здравствуйте. Есть 10 кнопок. Текущее оформление кнопок следующее: - Каждая кнопка имеет...

Изменение цвета текста на кнопке
Добрый день! Подскажите, пожалуйста, как изменить цвет текста на кнопке, если копка Disable? То...

Фиксация Текста в переменную
В командной строке если нужно ввести символ, и его зафиксировать в перемнную, я писал так: ...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
9
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
27.12.2015, 21:20 2
skolm, не нужно вешать обработчики на каждую кнопку, для этого есть делегирование
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
27.12.2015, 22:55  [ТС] 3
Цитата Сообщение от Padimanskas Посмотреть сообщение
для этого есть делегирование
Хорошо, предположим есть делегирование, чем мне это поможет?
0
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
27.12.2015, 23:54 4
Цитата Сообщение от skolm Посмотреть сообщение
Хорошо, предположим есть делегирование, чем мне это поможет?
Конкретно для тебя - увы не могу даже предположить, ну мож научит читать документацию, а вот для браузера будет подспорьем, ведь ему и так не легко приходится.
0
супермизантроп
Эксперт JS
3862 / 2936 / 685
Регистрация: 18.04.2012
Сообщений: 8,540
27.12.2015, 23:55 5
Цитата Сообщение от skolm Посмотреть сообщение
чем мне это поможет?
не десять раз напишете onclick, а всего один раз
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
onload= function ()
{
var B = document.querySelectorAll ('.myBtn');
for (var j = 0, J = B.length; j < J; j++) B [j].onclick = function ()
   {
   var CLR = this.getAttribute ('clr').split ('*');
   if (CLR.length == 2) this.setAttribute ('clr', CLR [0]), this.style.background = '';
   else this.setAttribute ('clr', CLR [0] + '*'), this.style.background = CLR [0];
   }                                                                      
}
</script>
<p><input type="button" value="1" class="myBtn" clr="red">
<p><input type="button" value="2" class="myBtn" clr="orange">
<p><input type="button" value="3" class="myBtn" clr="yellow">
<p><input type="button" value="4" class="myBtn" clr="green" >
<p>...
<p><input type="button" value="10" class="myBtn" clr="violet">
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
28.12.2015, 00:09  [ТС] 6
Цитата Сообщение от kalabuni Посмотреть сообщение
не десять раз напишете onclick, а всего один раз
Это и есть ваш код Спасибо за него, но как реализовать на его базе еще и фиксацию цвета шрифта на кнопке

Фиксация цвета кнопок
0
супермизантроп
Эксперт JS
3862 / 2936 / 685
Регистрация: 18.04.2012
Сообщений: 8,540
28.12.2015, 00:42 7
Цитата Сообщение от skolm Посмотреть сообщение
но как реализовать на его базе еще и фиксацию цвета шрифта на кнопке
конкретно распишите -- какой именно цвет шрифта нужно фиксировать?
одинаковый на всех десяти кнопках какой-то один цвет, например, красный, или же разный для каждой кнопки?
нужно ли при этом фиксировать разноцветные фоны кнопок (как это сделал я в своём коде) или уже не нужно?
в ЛС вы ещё чего-то написали и про изменение самого текста на кнопках -- так с какого текста на какой менять надо?

поподробнее распишите, ни о чём из своих пожеланий не забывая
0
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
28.12.2015, 14:59  [ТС] 8
Цитата Сообщение от kalabuni Посмотреть сообщение
конкретно распишите -- какой именно цвет шрифта нужно фиксировать?
одинаковый на всех десяти кнопках какой-то один цвет, например, красный, или же разный для каждой кнопки?
нужно ли при этом фиксировать разноцветные фоны кнопок (как это сделал я в своём коде) или уже не нужно?
в ЛС вы ещё чего-то написали и про изменение самого текста на кнопках -- так с какого текста на какой менять надо?
поподробнее распишите, ни о чём из своих пожеланий не забывая

Например: Есть 10 прозрачных кнопок, с красным бордером и красным шрифтом. При наведении, цвет кнопки заливается полностью красным, цвет шрифта меняется на белый. Если я нажал это кнопку, то фиксируется красный цвет кнопки и белый цвет шрифта. Если я нажимаю повторно на эту кнопку, её оформление становится снова: с красным бордером и красным шрифтом.
Данный механизм - одинаков для всех 10-ти кнопок.
0
супермизантроп
Эксперт JS
3862 / 2936 / 685
Регистрация: 18.04.2012
Сообщений: 8,540
28.12.2015, 17:35 9
Лучший ответ Сообщение было отмечено skolm как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
body          {                                 background-color: #efefef}
.btnRedText   {color: red;   border-color: red; background-color: transparent}
.btnWhiteText {color: white; border-color: red; background-color: red}
</style>
<script>
onload = function ()
{
function Mout ()  {this.className = 'btnRedText'}                                                                  
for (var B = document.querySelectorAll ('.btnRedText'), j = 0, J = B.length; j < J; j++)
   B [j].onmouseover = function () {this.className = 'btnWhiteText'},
   B [j].onmouseout = Mout,
   B [j].onclick = function ()
                   {
                   if (this.onmouseout) this.className = 'btnWhiteText', this.onmouseout = '';
                   else                 this.className = 'btnRedText', this.onmouseout = Mout;
                   }
}
</script>
<body>
<p><input type="button" class="btnRedText" value="1">
<p><input type="button" class="btnRedText" value="2">
<p><input type="button" class="btnRedText" value="3">
<p>...
<p><input type="button" class="btnRedText" value="10">
</body>
1
19 / 18 / 5
Регистрация: 01.02.2013
Сообщений: 171
28.12.2015, 18:02  [ТС] 10
Цитата Сообщение от kalabuni Посмотреть сообщение
<style>
body * * * * *{ * * * * * * * * * * * * * * * * background-color: #efefef}
.btnRedText * {color: red; * border-color: red; background-color: transparent}
.btnWhiteText {color: white; border-color: red; background-color: red}
</style>
<script>
onload = function ()
{
function Mout () *{this.className = 'btnRedText'} * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
for (var B = document.querySelectorAll ('.btnRedText'), j = 0, J = B.length; j < J; j++)
* B [j].onmouseover = function () {this.className = 'btnWhiteText'},
* B [j].onmouseout = Mout,
* B [j].onclick = function ()
* * * * * * * * * {
* * * * * * * * * if (this.onmouseout) this.className = 'btnWhiteText', this.onmouseout = '';
* * * * * * * * * else * * * * * * * * this.className = 'btnRedText', this.onmouseout = Mout;
* * * * * * * * * }
}
</script>
<body>
<p><input type="button" class="btnRedText" value="1">
<p><input type="button" class="btnRedText" value="2">
<p><input type="button" class="btnRedText" value="3">
<p>...
<p><input type="button" class="btnRedText" value="10">
</body>
Огромное Вам спасибо!!!! Замечательно
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.12.2015, 18:02

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

Фиксация размера текста
У меня есть веб-страница. Нужно, чтобы при масштабировании текст не уменьшался, а оставался такого...

Фиксация от поворота текста в сборной фигуре
Требуется, чтобы текст внутри фигуры был всегда повернут в одну сторону - влево (в сторону рамки),...

Передача цвета строк и цвета текста из stringgrid в excel и обратно
Доброго дня. Интересует вопрос передачи цвета строк и цвета текста из stringgrid в excel и...

Изменение цвета текста, когда код цвета берется с сервера
Есть задание : Отправить на сервер название цвета, получить от сервера цвет в формате RGB и...


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

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

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