128

JavaScript で css を使用して HTML 要素の背景色を設定するにはどうすればよいですか?

4

17 に答える 17

164

一般に、CSS プロパティはダッシュなしのキャメルケースにすることで JavaScript に変換されます。と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');
于 2008-08-06T12:25:54.920 に答える
30

すべてのスタイルなどを CSS に保持し、JavaScript でクラス名を設定/設定解除するだけで、コードの保守性が向上する場合があります。

CSS は明らかに次のようになります。

.highlight {
    background:#ff00aa;
}

次にJavaScriptで：

element.className = element.className === 'highlight' ? '' : 'highlight';
于 2008-08-19T11:59:40.470 に答える
24 
var element = document.getElementById('element');
element.style.background = '#FF00AA';
于 2008-08-06T12:25:13.800 に答える
21

または、小さな jQuery を使用して:

$('#fieldID').css('background-color', '#FF6600');
于 2008-08-06T13:23:42.247 に答える
7

このスクリプト要素を body 要素に追加します。

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
于 2011-03-03T21:20:56.590 に答える
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>

于 2015-04-17T16:07:45.950 に答える
5

これを試すことができます

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

于 2015-09-03T12:21:03.320 に答える
4

キスの答え:

document.getElementById('element').style.background = '#DD00DD';
于 2013-03-01T23:57:53.427 に答える
4

JQueryでそれを行うことができます：

$(".class").css("background","yellow");
于 2014-02-10T17:13:09.163 に答える
1

あなたが使用することができます

$('#elementID').css('background-color', '#C0C0C0');
于 2014-04-11T01:34:55.530 に答える
0

シンプルなjsでこれを解決できます：

document.getElementById("idName").style.background = "blue";
于 2020-01-20T08:38:10.603 に答える