Prototype missing : after element

Question

Hi Guys,

I am using this script in prototype

Event.observe(window, 'load', function() {

$('li.home').setStyle({
  padding-top: '10px'
});

});

And it gives me the error

missing : after property id
padding-top: '10px'\n

Not really sure what I am doing wrong ?

Answer 1

setStyle uses the camelized version of the css property you wish to set. So, padding-top should be paddingTop.

Also, $() expects the parameter to be a string containing an element's ID, or an element to be extended.

If you'd like to select a number of elements matching a selector, use $$(). Please note $$() returns an array, so you'll have to manipulate each element by enumerating, or using a Enumerable method like invoke to make a call to each element.

try

Event.observe(window, 'load', function() {

$$('li.home').invoke("setStyle", {
  paddingTop: '10px'
});

});