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