JavaScript 点击 onClick 改变 CSS

Question

这可能非常简单，我知道你可以通过以下方式使用JavaScript更改CSS属性：

document.getElementById('bob').style.background='#000000';

但是我最近发现您可以以不同的方式进行操作并设置多个样式，类似于这样;

document.getElementById('bob').css='background:#ffffff; color: #000000;';

问题是我忘记了代码，所以我想要实现的基本上是在".css"之前放什么？有人知道我需要的代码吗？

- Lenny Magico

---

不行 :( 哎呀，应该把它写下来的。 - Lenny Magico

Answer 1

我猜您正在寻找style中的.cssText属性。

document.getElementById('bob').style.cssText = 'background:#ffffff; color: #000000;';

示例：http://jsfiddle.net/Sx5yH/

- jAndy

---

据我所知，是的！但是我不确定IE6及以下版本或FF < 3是否支持。 - jAndy

Answer 2

请看这个示例：http://jsfiddle.net/YSJfz/。

document.getElementById('myDiv').setAttribute('style', 'background: #f00; color: #fff;');

我所做的只是更改元素的style属性，这是否是您想要实现的目标？

- Kevin

Answer 3

我认为您需要的是使用JavaScript更改元素的类。因为这样，您就不需要在JavaScript本身上硬编码所有的样式更改（这是不好的）。

所以您将拥有一个类似于以下内容的CSS类：

.myClass {
    background: #ffffff;
    color: #000000;
}

你可以像这样设置你的元素：

document.getElementById("MyElement").className += " myClass";

- Erick Petrucelli

---

我知道你可以用这种方式做到，但我认为我需要.cssText来实现我想要的效果，不过还是谢谢你:D - Lenny Magico

Answer 4

document.getElementById('bob').style.cssText = 
    'background:#ffffff; color: #000000;';

- melhosseiny