JavaScript中的CSS背景颜色

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

0
额外 编辑
意见: 1

15 答案

或者,使用一个小的jQuery:

$('#fieldID').css('background-color', '#FF6600');
0
额外
是否因为我引用了jQuery而降低了评分?只是好奇
额外 作者 Wally Lawless,
很可能,因为OP已经要求使用Javascript;)
额外 作者 Lodder,

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

0
额外

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

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

您可以使用:

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

使用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
0
额外

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

你的CSS显然是这样的:

.highlight {
    background:#ff00aa;
}

然后在JavaScript中:

element.className = element.className === 'highlight' ? '' : 'highlight';
0
额外
这在大多数情况下都是有效的,但在配置中定义颜色(或任何属性)或用户输入时,不能为每种可能的颜色创建CSS类;)
额外 作者 Juan Mendes,
呃是的Javascript,但你把它放在哪里?不够清楚
额外 作者 Led,
我会说,它很明显放在哪里 - 在你想改变的HTML之后的任何地方。
额外 作者 TeeJay,

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

function setColor(element, color)
{
    element.style.backgroundColor = color;
}
0
额外
我想添加颜色显然需要在引号element.style.backgroundColor =“color”;例如 - element.style.backgroundColor =“orange”;优秀的答案
额外 作者 Catto,
在Selenium测试中:((IJavaScriptExecutor)WebDriver).ExecuteScript(“arguments [0]&zwnj; .style.background ='yellow';”,webElement);
额外 作者 nexoma,
@Catto在这种情况下,color是该函数的一个参数,因此它不应该用引号引起来。然而,通常情况下,如果设置颜色,JS中需要双引号。
额外 作者 Bharat Mallapur,

你可以试试这个

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

0
额外
element.style.background-color 是无效的JavaScript。这就是为什么CSS属性转换为CamelCase。
额外 作者 CrazyIvan1974,
哦,是的,你是对的..!谢谢@ CrazyIvan1974
额外 作者 Ajay Gupta,

KISS答案:

document.getElementById('element').style.background = '#DD00DD';
0
额外
我们如何才能为课堂做到这一点?
额外 作者 Vignesh Subramanian,
对于class document.getElementByClass('element')。style.background ='#DD00DD';
额外 作者 MD Ashik,

你可以用JQuery来完成它:

$(".class").css("background","yellow");
0
额外

您可以使用

$('#elementID').css('background-color', '#C0C0C0');
0
额外
@Novocaine jQuery是使用JavaScript编写的,是的。但仍然是$不会工作,除非你包含该jQuery库;)
额外 作者 Vignesh Subramanian,
这是jQuery不JavaScript的
额外 作者 Vignesh Subramanian,
@vignesh jQuery JavaScript -__-
额外 作者 Novocaine,

<div class="snippet" data-lang="js" data-hide="false"><div class =“snippet-code”>

 var element = document.getElementById('element');

element.onclick = function(){
  element.classList.add( 'BACKGROUNDCOLOR');
  
  setTimeout(function(){
    element.classList.remove( 'BACKGROUNDCOLOR');
  },2000);
}; </代码> 
  .backGroundColor {
    背景颜色:绿色;
} </代码> 
  <div id =“element”> Click Me </div>  
</div></div>
0
额外
$(".class")[0].style.background = "blue";
0
额外
对这个问题有足够的正确答案,这个答案没有比其他答案更好的答案。
额外 作者 Novocaine,
正如Novocaine所说,这里有很多答案。但将来请考虑编辑您的帖子以添加更多关于您的代码的解释以及为什么它可以解决问题。一个主要包含代码的答案(即使它正在工作)通常不会帮助OP了解他们的问题。
额外 作者 SuperBiasedMan,
$("body").css("background","green"); //jQuery

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

有很多方法,我认为这很容易和简单

Plunker演示

0
额外
$('#ID / .Class').css('background-color', '#FF6600');

通过使用jquery,我们可以定位元素的类或Id以应用css背景或任何其他样式

0
额外