Jak nastavit barvu pozadí CSS HTML pomocí JavaScriptu

Translate

Jak mohu nastavit barvu pozadí CSS prvku HTML pomocí JavaScriptu?

This question and all comments follow the "Attribution Required."

Všechny odpovědi

Translate

Obecně se vlastnosti CSS převádějí do JavaScriptu tak, že jsou camelCase bez pomlček. Takbackground-colorse stávábackgroundColor.

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

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

Možná zjistíte, že je váš kód udržovatelnější, pokud si ponecháte všechny své styly atd. V CSS a nastavíte / zrušíte názvy tříd v JavaScriptu.

Vaše CSS by samozřejmě bylo něco jako:

.highlight {
    background:#ff00aa;
}

Pak v JavaScriptu:

element.className = element.className === 'highlight' ? '' : 'highlight';
Zdroj
Translate
var element = document.getElementById('element');
element.style.background = '#FF00AA';
Zdroj
Translate

Nebo pomocí malého jQuery:

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

Přidejte tento prvek skriptu do svého prvku těla:

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
Zdroj
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>
Zdroj
Translate

Můžete to zkusit

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

Příklad.

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

JSFIDDLE

Zdroj
Translate

Můžete to udělat pomocí JQuery:

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

KISS odpověď:

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

Můžeš použít:

  <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>
Zdroj
Translate
$("body").css("background","green"); //jQuery

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

existuje mnoho způsobů, myslím, že je to velmi snadné a jednoduché

Demo na Plunker

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

Pomocí jQuery můžeme zacílit na třídu prvku nebo Id použít CSS pozadí nebo jiné styly

Zdroj
Translate

Můžeš použít

$('#elementID').css('background-color', '#C0C0C0');
Zdroj
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
Zdroj
Translate

Změna CSS aHTMLElement

Většinu vlastností CSS můžete změnit pomocí JavaScriptu, použijte toto prohlášení:

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

kde<selector>, <property>, <new style>všichni jsouStringpředměty.

Vlastnost style bude mít obvykle stejný název jako skutečný název používaný v CSS. Ale kdykoli existuje více než jedno slovo, bude to velbloudí případ: napříkladbackground-colorse mění sbackgroundColor.

Následující příkaz nastaví pozadí#containerdo červené barvy:

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

Zde je rychlá ukázka změny barvy pole každých 0,5 s:

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>
Zdroj
Translate
$(".class")[0].style.background = "blue";
Zdroj