javascript - DOM如何在一个div中添加多个样式

Question

我正在尝试使用 DOM 添加多个样式属性setAttribute，但它不起作用。我怎样才能使用 JavaScript 做到这一点？

 var modificar = document.getElementById('opciones');
 modificar.setAttribute('style','float:left');
 modificar.setAttribute('style','margin:0px');

Answer 1

在元素上使用style对象：

modificar.style.cssFloat = "left";
modificar.style.margin = "0px";

（请注意，它来自 JavaScript cssFloat，而不是。这是因为它是 ECMAScript 规范第 3 版中的“未来保留字”[它不再在 ES5 中]，并且在以文字表示法编写属性名称时不能使用保留字.所以在定义样式对象时，他们选择了冲突时的名称。）floatfloatcssFloat

对于带有破折号的属性，您可以使用 camelCase 代替：

modificar.style.backgroundColor = "#eee";

Answer 2

setAttribute很可能工作正常，但由于您调用它两次，第一次调用的结果被第二次覆盖。

要么做：

modificar.setAttribute('style','float: left; margin:0px;');

或者使用style另一个答案中建议的属性。

Answer 3

有两种方法可以做到：

modificar.style.setAttribute('float','left');
modificar.style.setAttribute('margin','0px');

或者：

modificar.style.cssFloat  = 'left';
modificar.style.margin = '0px';

cssFloat（编辑：根据后面的帖子更正）

Answer 4

您可以将类设置为 div，例如：

var modificar = document.getElementById('opciones');
x.className = "someClass";

在 CSS 中，添加任意数量的样式：

.someClass {
    float:left;
    margin:0px;
    color : red;
    ...
    ...
}