JavaScript中的CSS背景颜色

ysequi 发布于 2018-02-27 css 最后更新 2018-02-27 01:05 670 浏览

我如何使用JavaScript设置HTML元素的CSS背景颜色?

已邀请:

seaque

赞同来自:

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

ksit

赞同来自:

一般来说,CSS属性通过使它们不带任何破折号的camelCase转换为JavaScript。因此background-color成为backgroundColor

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

zcum

赞同来自:

或者,使用一个小的jQuery:

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

ysunt

赞同来自:

如果将所有样式等保存在CSS中,并且只需在JavaScript中设置/取消设置类名称,则可能会发现代码更易于维护。 你的CSS显然是这样的:

.highlight {
    background:#ff00aa;
}
然后在JavaScript中:
element.className = element.className === 'highlight' ? '' : 'highlight';

yautem

赞同来自:

将此脚本元素添加到您的body元素中:

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

ueum

赞同来自:

KISS答案:

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

set

赞同来自:

您可以使用:

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

ased

赞同来自:

你可以用JQuery来完成它:

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

nerror

赞同来自:

您可以使用

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

eet

赞同来自:

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>

dmodi

赞同来自:

你可以试试这个

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

eomnis

赞同来自:

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

jdolor

赞同来自:

$("body").css("background","green"); //jQuery
document.body.style.backgroundColor = "green"; //javascript
有很多方法,我认为这非常简单 Demo On Plunker

zamet

赞同来自:

$('#ID/.Class').css('background-color', '#FF6600');
通过使用jQuery,我们可以定位元素的类或Id以应用css背景或任何其他样式

lnon

赞同来自:

使用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