如何在 javascript 函数中使用 css答案

【问题标题】：How to use css within a javascript function如何在 javascript 函数中使用 css
【发布时间】：2009-04-09 09:09:02
【问题描述】：

我正在使用jQuery月历，其中每天都是一个单元格，在单元格中单击onClick，我可以打印警报，但我还想更改我单击的单元格的背景颜色。但我没有办法使用 Javascript 调用 CSS。请帮帮我。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

在 jQuery 中，您可以使用 css method 更改单元格的背景颜色：

// let's say this is in a loop
$(this).css('background-color', '#f00');

【讨论】：

【解决方案2】：

在纯 JavaScript 中：

var element = document.getElementById("myElement");
element.style.backgroundColor = "#fff";

史蒂夫

【讨论】：

【解决方案3】：

使用 JS 更改任何元素的样式属性会创建一个非常高的特异性规则，难以检测和删除，并且在处理多种样式效果时不太灵活（假设您想要一个边框和一个背景，现在您有两倍的工作要做）。

几乎总是从维护、灵活性和关注点分离的角度来看要好得多不是直接修改元素的样式，而是改变它的类并让 CSS 来做为你工作。

例如，我想更改为这种边框+背景样式，所以我将在我的 CSS 中定义一个类

.highlight
{
  border: 1px solid black;
  background: white;
}

然后我会修改我需要的元素：

document.getElementById('myElementId').className += " highlight"; //note the space

现在在实践中，我实际上会将该类修改代码包装在一个更通用的包装器中，以保护自己不会两次分配同一个类，并使再次删除它更容易，但原则上你可以看到它现在是微不足道的仅在一个点更改“突出显示”的效果，它允许正常级联，并且检测元素是否具有突出显示类比检查它是否具有 FOO 的背景颜色和 BAR 的边框要容易得多。

它还非常重要地增加了语义价值。自我记录的代码是一个非常好的的东西。

【讨论】：

【解决方案4】：

设置一个css属性：

$("#myCalender").css("background-color","SomeColor");

设置整个类：

$("#myCalender").addClass("DifferentBGColorClass");

【讨论】：

【解决方案5】：

要更改您可以使用的背景颜色：

document.getElementById("").style.backgroundColor = "#ffffff";

【讨论】：