Prototype.js is a great JavaScript library that significantly reduces your web programming tasks. For instance, you can easily change the style of an element using prototype.js. Now, why would you change the style of an element with JavaScript when you can easily do it with a cascading stylesheet (CSS) file?
It makes your web elements, whether they’re DIVs or paragraphs or bullets or hyperlinks, more interactive. Suppose you want to change the background color of a DIV if a user gives incorrect input in a form. Or if you want to disable a particular form field and change the color of the label to a lighter shade then it’s easier to evaluate the form field and change the style in real time using prototype.js.
Let’s take an example (see demo). Suppose a particular subscription feature is available only if a person subscribes for more than 6 months. Here’s the form to handle a subscription plan (hypothetical):
<form id=”example_form”>
<p><label id=”blueplanlabel”>Subscription of our blue plan:</label> <input id=”blueplan” name=”blueplan” type=”checkbox” value=”1″ onclick=”change_yellow_plan();” /></p>
<p><label id=”numofmonthslabel”>Number of months:</label> <input type=”text” id=”numofmonths” name=”numofmonths” size=”5″ onkeyup=”change_yellow_plan();” /></p>
<p><label id=”yellowplanlabel”>Subscription of our yellow plan:</label> <input type=”checkbox” name=”yellowplan” id=”yellowplan” value=”1″ /></p>
<input type=”submit” name=”s1″ value=”Submit” />
</form>
As you can see, we have associated a JavaScript function to various form field attributes. For instance, if you uncheck the blue plan then the yellow plan automatically gets disabled and the style of the label (color) changes to grey. Similarly, if the number of months is not greater than 6 then too the yellow plan is disabled and the color of the label is changed. Here’s the JavaScript portion that handles this function:
<script language=”javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js”></script>
<script language=”javascript”>
window.onload=function(){
change_yellow_plan();
}
function change_yellow_plan()
{
if($F(“blueplan”)!=1)
{
$(“yellowplan”).checked=false;
$(“yellowplan”).disable();
$(“yellowplanlabel”).setStyle({color:’#707978′});
}
else
{
if($F(“numofmonths”)>6)
{
$(“yellowplan”).enable();
$(“yellowplanlabel”).setStyle({color:’#000000′});
}
else
{
$(“yellowplan”).checked=false;
$(“yellowplan”).disable();
$(“yellowplanlabel”).setStyle({color:’#707978′});
}
}
}
</script>
In order to use prototype.js you can either download it from the actual website or you can straightaway link from the Google Ajax repository: the benefit is that you always use the latest version.
As you can see (we’re not discussing the programming logic here) it’s very easy to change the style of an ID with prototype.js. You just need to use the correct ID and the setStyle function. You can separate different style properties with commas (fontSize, color, margin-left, margin-right).
