如何使用JavaScript中的CSS属性设置HTML元素的背景颜色

Question

如何使用JavaScript中的CSS属性设置HTML元素的背景颜色

javascriptcssbackground-color

129

我怎样可以使用JavaScript中的css设置HTML元素的背景颜色？

- GateKiller

17个回答

31

如果您将所有的样式等内容放在 CSS 中，而只是在 JavaScript 中设置/取消类名，则可能会发现您的代码更易于维护。

显然，您的 CSS 将如下所示：

.highlight {
    background:#ff00aa;
}

然后在JavaScript中：

element.className = element.className === 'highlight' ? '' : 'highlight';

- Ian Oxley

2

我认为很明显应该把它放在哪里 - 在你想要修改的HTML之后的任何地方。 - TeeJay

1

这在大多数情况下是有效的，但在颜色（或其他属性）在配置中定义或用户输入的情况下，则无效。你不能为每种可能的颜色创建CSS类 ;) - Ruan Mendes

25

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

- tags2k

21

或者，使用一点jQuery：

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

- Wally Lawless

很可能，因为OP要求使用Javascript ;) - Lodder

7

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

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

- james.garriss

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>

- Roger Causto

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

- Ajay Gupta

1

element.style.background-color 不是有效的 JavaScript 代码。这就是为什么 CSS 属性被转换为 CamelCase 的原因。 - CrazyIvan1974

4

KISS答案：

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

- Zardiw

我们如何为类做到这一点？ - Vignesh Subramanian

对于类 document.getElementByClass('element').style.background = '#DD00DD'; - MD Ashik

4

您可以使用jQuery完成此操作：

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

- bluelog

3

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

通过使用jQuery，我们可以针对元素的类或ID应用CSS背景或任何其他样式。

- pragadeesh mahendran

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Wengier · Accepted Answer

通常，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');