使用JavaScript修改CSS

我想下面的代码应该转换为类似的东西

#A1, #A2, #A3, #A4{
   float: left;
   clear: left;
   width: 300px;
   margin: 15px;
}

到

而且

Width

属性值应该是动态的。这应该来自javascript。我们如何才能做到这一点？

试试这个：

document.getElementById("id").style.width = "900px";

要更改id找到的每个元素的宽度，您最好对A1、A2、A3和A4执行此操作。

编辑：好的，下面是纯DOM版本：

function changeWidths(ids, width) {
    for(var i = 0; i < ids.length; i++) {
       document.getElementById(ids[i]).style.width = width + "px";
    }
}

changeWidths(["A1", "A2", "A3", "A4"], 400);

---

你用谷歌搜索过这个吗？如果你还没有使用jQuery，那么使用原始的DOM API就更容易了。@Jeremy更新了我的代码。我之所以展示JQuery版本，是因为它更符合CSS中的选择器。@Jeremy使用JQuery更容易。“没有如果”。@onteria：我明白，我没有投反对票。但是@Suraj根本没有提到jQuery。它确实更干净，但是OP不应该为了不获得基于jQuery的答案而显式排除jQuery。也就是说，我认为在一个简单的JS/DOM解决方案之后再提供一个jQuery解决方案是非常好的，因为jQuery实际上可能会有所帮助。@Jeremy我认为jQuery版本简洁且更灵活，而这个特定的函数需要一系列ID。如果要按类选择，会发生什么情况？元素名称？此功能必须进一步扩展以处理额外的需求。在这里，我可以使用CSS选择器的灵活性来处理更多的情况。

function changeWidths(ids, width) {
    for(var i = 0; i < ids.length; i++) {
       document.getElementById(ids[i]).style.width = width + "px";
    }
}

changeWidths(["A1", "A2", "A3", "A4"], 400);

$("#A1, #A2, #A3, #A4").css({"width": 400});

document.getElementById("A1").style.width = "400px";