Javascript таблица цвет фона

JavaScript | Как установить цвет фона для ячейки HTML-таблицы?

У нас есть примитивная таблица в HTML-разметке (скопируй код себе, чтобы потренироваться):

Визуально в браузере это выглядит так:

Таблица в 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)"))

Вывод будет выглядеть так:

Вывели свойства объекта HTML-элемента в консоль браузера

Получение свойства, отвечающего за графическое оформление

Среди всех его свойств нас будет интересовать свойство «style«, которое хранит объект класса CSSStyleDeclaration, описанного в стандарте CSSOM.

Свойство style в экземпляре HTMLTableCellElement - JavaScript

Получение свойства, отвечающего за цвет заднего фона для HTML-элемента

В свою очередь, экземпляр CSSStyleDeclaration хранит свойство «backgroundColor«, которое в данный момент имеет значение пустой строки.

Свойство backgroundColor объекта CSSStyleDeclaration равно пустой строке - JavaScript

Именно это свойство нам нужно поправить, чтобы реально-отображаемый цвет ячейки таблицы изменился.

То есть нам нужно написать строку в синтаксисе, понятном для анализатора цветов в CSS. Это тема отдельного занятия, поэтому я просто буду использовать цвет «rgb(255 255 0)«.

Обновление цвета ячейки таблицы при помощи JavaScript

Теперь мы можем выстроить цепочку выражений, которые установят жёлтый цвет фона для ячейки посередине.

document.querySelector("body > div > table > tbody > tr > th:nth-child(2)").style.backgroundColor = 'rgb(255 255 0)'

Получаем запланированный результат:

Изменили цвет ячейки таблицы на жёлтый - JavaScript

Изменения можно также увидеть в разметке документа.

Источник

Читайте также:  Html picture lazy load
Оцените статью