У нас есть примитивная таблица в HTML-разметке (скопируй код себе, чтобы потренироваться):
<!DOCTYPE html>
<html lang=«en»>
<head>
<meta charset=«UTF-8»>
<meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
<meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
<title>Document</title>
</head>
<body>
<div align=«center»>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>qwe</th>
<th>asd</th>
<th>zxc</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Визуально в браузере это выглядит так:
Мы хотим поменять цвет средней ячейки, которая содержит слово «asd«. Как это сделать?
Получение объекта ячейки
Получаем сам объект ячейки с нужным нам словом. Например так (актуально для нашего случая):
document.querySelector("body > div > table > tbody > tr > th:nth-child(2)")
Если смотреть в браузере на вкладке Console, то отобразить объект со всеми его свойствами можно командой:
console.dir(document.querySelector("body > div > table > tbody > tr > th:nth-child(2)"))
Вывод будет выглядеть так:
Получение свойства, отвечающего за графическое оформление
Среди всех его свойств нас будет интересовать свойство «style«, которое хранит объект класса CSSStyleDeclaration, описанного в стандарте CSSOM.
Получение свойства, отвечающего за цвет заднего фона для HTML-элемента
В свою очередь, экземпляр CSSStyleDeclaration хранит свойство «backgroundColor«, которое в данный момент имеет значение пустой строки.
Именно это свойство нам нужно поправить, чтобы реально-отображаемый цвет ячейки таблицы изменился.
То есть нам нужно написать строку в синтаксисе, понятном для анализатора цветов в CSS. Это тема отдельного занятия, поэтому я просто буду использовать цвет «rgb(255 255 0)«.
Обновление цвета ячейки таблицы при помощи JavaScript
Теперь мы можем выстроить цепочку выражений, которые установят жёлтый цвет фона для ячейки посередине.
document.querySelector("body > div > table > tbody > tr > th:nth-child(2)").style.backgroundColor = 'rgb(255 255 0)'
Получаем запланированный результат:
Изменения можно также увидеть в разметке документа.
Информационные ссылки
Стандарт ECMAScript — https://tc39.es/ecma262/multipage/
Стандарт DOM — https://dom.spec.whatwg.org
