Как установить цвет фона CSS для HTML с помощью JavaScript

Как установить цвет фона HTML элемента HTML с помощью JavaScript?

Ответ 1

В общем, свойства CSS преобразуются в JavaScript, делая их camelCase без каких-либо штрихов. Таким образом, background-color становится backgroundColor.

function setColor(element, color)
{
    element.style.backgroundColor = color;
}

// where el is the concerned element
var el = document.getElementById('elementId');
setColor(el, 'green');

Ответ 2

Вы можете обнаружить, что ваш код более удобен в обслуживании, если вы сохраняете все свои стили и т.д. в CSS и просто устанавливаете/удаляете имена классов в JavaScript.

Ваш CSS, очевидно, будет чем-то вроде:

.highlight {
    background:#ff00aa;
}

Затем в JavaScript:

element.className = element.className === 'highlight' ? '' : 'highlight';

Ответ 3

var element = document.getElementById('element');
element.style.background = '#FF00AA';

Ответ 4

Или, используя небольшой jQuery:

$('#fieldID').css('background-color', '#FF6600');

Ответ 5

Добавьте этот элемент script в свой элемент body:

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>

Ответ 6

var element = document.getElementById('element');

element.onclick = function() {
  element.classList.add('backGroundColor');
  
  setTimeout(function() {
    element.classList.remove('backGroundColor');
  }, 2000);
};

.backGroundColor {
    background-color: green;
}

<div id="element">Click Me</div>

Ответ 7

Вы можете сделать это с помощью JQuery:

$(".class").css("background","yellow");

Ответ 8

Вы можете попробовать это

var element = document.getElementById('element_id');
element.style.backgroundColor = "color or color_code";

Пример.

var element = document.getElementById('firstname');
element.style.backgroundColor = "green";//Or #ff55ff

JSFIDDLE

Ответ 9

Ответ KISS:

document.getElementById('element').style.background = '#DD00DD';

Ответ 10

Вы можете использовать:

  <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>

Ответ 11

$("body").css("background","green"); //jQuery

document.body.style.backgroundColor = "green"; //javascript

так много способов, я думаю, что это очень легко и просто

Demo On Plunker

Ответ 12

$('#ID / .Class').css('background-color', '#FF6600');

С помощью jquery мы можем нацелить класс элемента или Id на применение фона css или любых других стилей

Ответ 13

вы можете использовать

$('#elementID').css('background-color', '#C0C0C0');

Ответ 14

JavaScript:

document.getElementById("ID").style.background = "colorName"; //JS ID

document.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class

Jquery:

$('#ID/.className').css("background","colorName") // One style

$('#ID/.className').css({"background":"colorName","color":"colorname"}); //Multiple style

Ответ 15

Изменение CSS `HTMLElement`

Вы можете изменить большинство свойств CSS с помощью JavaScript, используйте это утверждение:

document.querySelector(<selector>).style[<property>] = <new style>

где <selector>, <property>, <new style> - все объекты String.

Обычно свойство style будет иметь то же имя, что и фактическое имя, используемое в CSS. Но всякий раз, когда есть более одного слова, это будет случай верблюда: например, background-color изменяется на backgroundColor.

Следующее утверждение установит красный цвет фона #container:

documentquerySelector('#container').style.background = 'red'

Вот быстрое демо, меняющее цвет коробки каждые 0,5 с:

colors = ['rosybrown', 'cornflowerblue', 'pink', 'lightblue', 'lemonchiffon', 'lightgrey', 'lightcoral', 'blueviolet', 'firebrick', 'fuchsia', 'lightgreen', 'red', 'purple', 'cyan']

let i = 0
setInterval(() => {
  const random = Math.floor(Math.random()*colors.length)
  document.querySelector('.box').style.background = colors[random];
}, 500)

.box {
  width: 100px;
  height: 100px;
}

<div class="box"></div>

Ответ 16

$(".class")[0].style.background = "blue";