Как использовать CSS внутри функции JavaScript

Question

Я использую ежемесячный календарь jQuery, в котором каждый день есть ячейка, нажмите на ячейку, я могу напечатать предупреждение, но я также хочу изменить цвет фона ячейки, по которой щелкнул. Но я не понимаю способ вызова CSS с использованием Javascript. Пожалуйста, помогите мне.

Answer 1

И простым JavaScript:

var element = document.getElementById("myElement");
element.style.backgroundColor = "#fff";

Steve

Answer 2

В jQuery вы можете использовать метод css , чтобы изменить цвет фона ячейки:

// let's say this is in a loop
$(this).css('background-color', '#f00');

Answer 3

Использование JS для изменения свойства стиля любого элемента создает правило очень высокой специфичности, которое трудно обнаружить и удалить, и менее гибкое при работе с несколькими стилевыми эффектами (скажем, вам нужна граница, а также фон, теперь вы у меня вдвое больше работы).

Практически всегда гораздо проще с точки зрения обслуживания, гибкости и разделения проблем не напрямую изменять стиль элемента, но изменять его класс и позволить CSS выполнять работа для вас.

например, я хочу изменить этот стиль рамки + фона, поэтому я определю класс в своем CSS

.highlight
{
  border: 1px solid black;
  background: white;
}

и тогда я изменю элемент там, где мне нужно, так:

document.getElementById('myElementId').className += " highlight"; //note the space

Теперь на практике я бы фактически обернул этот код, модифицирующий класс, в более общую оболочку, чтобы защитить себя от назначения одного и того же класса дважды, и упростил бы удаление его снова, но в принципе вы можете видеть, что теперь это будет тривиально измените эффект «подсветки» только в одной точке, это обеспечивает нормальное каскадирование, и гораздо проще обнаружить элемент с классом подсветки, чем проверить, имеет ли он цвет фона FOO и границу BAR.

Это также очень важно добавляет смысловой смысл. Самодокументированный код - это очень хорошая вещь.

Answer 4

Чтобы изменить цвет фона, вы можете использовать:

document.getElementById("").style.backgroundColor = "#ffffff";

Answer 5

Чтобы установить одно свойство css:

$("#myCalender").css("background-color","SomeColor");

Чтобы установить весь класс:

$("#myCalender").addClass("DifferentBGColorClass");