select element with prototype

Question

Hi all, how can I select the following element using prototype div#page_container h1 and after selecting it change its padding-top ? Thank you

Answer 1

Make sure you include these .. and it should work , from this source

Cheers

Answer 2

Prototype's $$() method allows you to select using CSS selectors, eg

var elmArr = $$("div#page_container h1");

and its setStyle method allows you to change style, eg

elmArr[0].setStyle({paddingTop: "4px"});

or

$$("div#page_container h1")[0].setStyle({paddingTop: "4px"});

Edit: I'm pretty sure the returned array is also extended by prototype, so if you had multiple h1 elements in page_container, you could do:

$$("div#page_container h1").each(function(elm){
    elm.setStyle({paddingTop: "4px"});
});

or

$$("div#page_container h1").invoke("setStyle",{paddingTop: "4px"});

to set the paddingTop of all of them