How to set CSS background color of HTML using JavaScript


Translate

How can I set the CSS background color of an HTML element using 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 {
        background:#ff00aa;
    }
    

    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:

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

  • Translate

    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>

  • Translate

    You can try this

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

    Example.

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

    JSFIDDLE


  • Translate

    You can do it with JQuery:

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

  • Translate

    KISS Answer:

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

  • Translate

    You can use:

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

  • 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

    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
    

  • 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";