Modify CSS Using JavaScript

I want something like bel开发者_运维问答ow code should convert to

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

to

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

and that Width property value should be dynamic. That should come from javascript. How can we do that?

Try this:

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

to change the widths of each element found by id. You'd ideally do this for A1, A2, A3, and A4.

EDIT: Okay fine, here's the pure DOM version:

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);

JavaScript doesn't act on the actual CSS text directly, it acts on the element's style. If we use something like JQuery, we can modify the width of all the ID's you mentioned like so:

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

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