Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Другие темы раздела
JavaScript неправильно работает математическое уравнение https://www.cyberforum.ru/ javascript/ thread2765657.html
Я что-то недогоняю, объясните мне пожалуйста. Я вычисляю процент от числа, и прибавляю и вычитаю этот процент к этому числу. Допустим, от числа 100 ищу 1 процент, в одно поле вставляю результат...
JavaScript Динамически создать кнопку с картинкой
Здраствуйте, етот код создает кнопку с картинкой и текстом, <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <button class="myButton"...
Получить клас-родителя, обратное :nth-child(n) JavaScript
Здраствуйте, скажите пожалуйста как можно обратится к класу родителя без id, тоесть зделать обратное :nth-child() К примеру зделать здесь так чтоб красился бек-граунд контейнера а не кнопок ...
JavaScript d3js не рисует path Сообщений о исключениях нет. Данные в массиве есть. Не могу понять что этой скотине не хватает. Может кто то сможет подсказать ? function Chart(id, data) { var chartData =... https://www.cyberforum.ru/ javascript/ thread2764775.html
JavaScript Работа с базой данных из UserJS https://www.cyberforum.ru/ javascript/ thread2764740.html
Никак не найду способа делать запросы из UserJS (JavaScript, подключаемый к неродному сайту менеджером скриптов) скрипта в базу данных Microsoft SQL Server. Мне нужно подключиться к БД, прочитать...
JavaScript Узнать задан ли color
Добрый день, подскажите плиииз. Пытаюсь создать "мигание" для любого элемента "с восстановлением". Для этого задаю цвет на едко-красный, а потом восстанавливаю "на прошлый". Прошлый color...
JavaScript Отфильтровать массив объектов циклом.
В консоль ничего не выводится. Я так же пробовал через while и толку 0. В консоль вылезает такая ошибка:"1.js:6 Uncaught SyntaxError: Invalid shorthand property initializer". Вот код var cars = ...
JavaScript Как сделать событие, что данные от сервера получены? Здраствуйте, скажыте пожалуйста, как сделать событие данные от сервера получены, к примеру запускается функция ожидание данных сервера function getFromServer(){ serverAccesTimeoutID =... https://www.cyberforum.ru/ javascript/ thread2763909.html
JavaScript Карусель. картинки из бд https://www.cyberforum.ru/ javascript/ thread2763457.html
Доброго времени суток! Может кто нибудь подсказать, помочь.. Нужен готовый рабочий код (я разберусь как его переделать)для создания карусели (слайдера) при этом картинки должны быть только из базы...
JavaScript динамическое создание кнопок привет, мир! абсолютно не html/js разработчик. собственно требования в дизайне нет никакого. есть сервак, для которого сделал html-страничку, получающую через веб-сокеты от сервера json со... https://www.cyberforum.ru/ javascript/ thread2763140.html
JavaScript The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page https://www.cyberforum.ru/ javascript/ thread2763122.html
Как исправить ? The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://*******/7K7WLu ? И можно ли как-то, обойти задержку при...
JavaScript Плавно раскрыть элемент Привет. Надо плавно раскрыть пункты меню без использования jQuery. Раньше я эту библиотеку использовал. Сейчас хочу сделать на чистом js. https://www.cyberforum.ru/ javascript/ thread2762948.html
Модератор
2505 / 1475 / 450
Регистрация: 07.09.2019
Сообщений: 2,240
07.01.2021, 01:01 0

Поменять местами цвета кнопок

07.01.2021, 01:01. Просмотров 1501. Ответов 3
Метки (Все метки)

Лучший ответ Сообщение было отмечено Maximax67 как решение

Решение


Ну или, если хочется просто поупражняться в написании кода, то можно перекрашивать кнопки; на примере матрицы 4 х 4:
HTML5
1
2
3
4
5
6
<div>
  <button id="b1-1"></button>
  <button id="b1-2"></button>
  <button id="b2-1"></button>
  <button id="b2-2"></button>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
div {
  display: grid;
  grid-template-rows: repeat(2 1fr);
  grid-template-columns: repeat(2 1fr);
  width: 200px;
  height: 200px;
  border: thin solid black;
}
div button {
  border: none;
  border-radius: 0px;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const buttons = [...document.querySelectorAll("div button")];
buttons.forEach((b, i) => {
  b.style.gridRowStart = Math.floor(i / 2) + 1;
  b.style.gridColumnStart = (i % 2) + 1;
});
const matrix = [
  ["red", "white"],
  ["black", "red"]
];
render(matrix);
render(rotateCounterClockwise(matrix));
function render(matrix) {
  for (let i = 0; i < matrix[0].length; i++) {
    for (let j = 0; j < matrix.length; j++) {
      const btn = document.getElementById(`b${j + 1}-${i + 1}`);
      btn.style.backgroundColor = matrix[j][i];
    }
  }
}


Вернуться к обсуждению:
Поменять местами цвета кнопок
1
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.01.2021, 01:01
Готовые ответы и решения:

изменение цвета кнопок
Привет всем! Помогите разобраться. У меня есть например 4 кнопки с определенным цветом: ...

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

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

Смена цвета кнопок при нажатии
Здравствуйте, У меня есть список в котором несколько кнопок. Мне нужно чтобы при нажатии на кнопку...

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