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

original title: "How to set CSS background color of HTML using JavaScript"


How can I set the CSS background color of an HTML element using JavaScript?

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

Это резюме после перевода, если вам нужно просмотреть полный перевод, нажмите значок «перевести»

Все ответы
  • Translate

    In general, CSS properties are converted to JavaScript by making them camelCase without any dashes. So background-color becomes backgroundColor.

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

  • Translate

    You might find your code is more maintainable if you keep all your styles, etc. in CSS and just set / unset class names in JavaScript.

    Your CSS would obviously be something like:

    .highlight {

    Then in JavaScript:

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

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

  • Translate

    Or, using a little jQuery:

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

  • Translate

    Add this script element to your body element:

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

  • Translate

    var element = document.getElementById('element');
    element.onclick = function() {
      setTimeout(function() {
      }, 2000);
    .backGroundColor {
        background-color: green;
    <div id="element">Click Me</div>

  • Translate

    You can try this

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


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


  • Translate

    You can do it with JQuery:


  • Translate

    KISS Answer:

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

  • Translate

    You can use:

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

  • Translate
    $("body").css("background","green"); //jQuery
    document.body.style.backgroundColor = "green"; //javascript

    so many ways are there I think it is very easy and simple

    Demo On Plunker

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

    By using jquery we can target the element's class or Id to apply css background or any other stylings

  • Translate

    you can use

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

  • Translate


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


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

  • Translate

    Changing CSS of a HTMLElement

    You can change most of the CSS properties with JavaScript, use this statement:

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

    where <selector>, <property>, <new style> are all String objects.

    Usually, the style property will have the same name as the actual name used in CSS. But whenever there is more that one word, it will be camel case: for example background-color is changed with backgroundColor.

    The following statement will set the background of #container to the color red:

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

    Here's a quick demo changing the color of the box every 0.5s:

    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>

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