I have a div that I want to add a new style to using PrototypeJS. But the following script does not work. What is wrong with it?

<div class='exercise-main'>
</div>

$$('.exercise-main').setStyle({
    backgroundColor: '#900',
    fontSize: '12px'
});

I have a div that I want to add a new style to using PrototypeJS. But the following script does not work. What is wrong with it?

<div class='exercise-main'>
</div>

$$('.exercise-main').setStyle({
    backgroundColor: '#900',
    fontSize: '12px'
});

• javascript
• prototypejs

Share Improve this question Follow edited Jun 4, 2012 at 21:39 James Allardice 166k2222 gold badges334334 silver badges315315 bronze badges asked May 30, 2012 at 6:21 user1077300user1077300 42344 gold badges1010 silver badges1818 bronze badges 1

• If my answer helped out out, I'd appreciate it if you accepted my answer. Thanks! ( ^ _ ^ ) – dontGoPlastic Commented Aug 2, 2012 at 20:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The $$ function returns an array of all matching elements (if any). setStyle is an element method, not an array method.

There are a few options here.

If you're only ever expecting a single element to be matched, this will work.

$$('.exercise-main')[0].setStyle({color:'red'});

If you want to set the style on every matched element, either of these will work. They're essentially the same.

$$('.exercise-main').each(function(element) {
    element.setStyle({color: 'red'});
});

or

$$('.exercise-main').invoke('setStyle', {color:'red'});

Of course, if your element has an id, you can use the $ function to find just that element. This differs from $$ in that you don't pass it a selector string, but just the string of the id (ie no '#'). Also, this returns just the element or null - not an array - so you can use element methods straight from the returned value, similar to what you were initially attempting.

$('myElementId').setStyle({color:'red'});