Find a solution

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

original title: "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?

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

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

Все ответы
  • David Wengier
    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');
  • Ian Oxley
    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';
  • tags2k
    Translate 
    var element = document.getElementById('element');
element.style.background = '#FF00AA';
  • Wally Lawless
    Translate

    Or, using a little jQuery:

    $('#fieldID').css('background-color', '#FF6600');
  • james.garriss
    Translate

    Add this script element to your body element:

    <body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
  • Roger Causto
    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>
  • Ajay Gupta
    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

  • bluelog
    Translate

    You can do it with JQuery: 

    $(".class").css("background","yellow");
  • Zardiw
    Translate

    KISS Answer:

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

    You can use:

      <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>
  • Srikrushna
    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

  • pragadeesh mahendran
    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

  • hamed
    Translate

    you can use 

    $('#elementID').css('background-color', '#C0C0C0');
  • Mr.Pandya
    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
  • Ivan
    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>
  • Mehadi Hassan
    Translate 
    $(".class")[0].style.background = "blue";

Похожие проблемы

Недавние проблемы