- MooTools 1.3 Cookbook
- Jay Larry G. Johnston
- 254字
- 2021-04-02 19:07:10
Styling the borders of a group of elements
In this recipe, we'll see how to use one style declaration phrase to alter any group of selected elements.
Getting ready
When a group of elements must have borders, we can style them all with just one call. Just as we apply styles to a single element through the Element.setStyle() and Element.setStyles() methods, our groups of elements can be styled just as easily.
How to do it...
This example demonstrates the changing of a single property with setStyle() as well as the changing of multiple style properties with the setStyles() method.
<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<form action="javascript:" method="get">
<input id="go_bold" type="button"
value="Set Borders on a Group"/>
<input id="go_div" type="button" value="Set Authors Apart"/>
</form>
<br/>
<div>Every great man nowadays has his disciples,
and it is always Judas who writes the biography.
<span class="quote_author">Oscar Wilde</span></div>
<div>A hard man is good to find.
<span class="quote_author">Mae West</span></div>
<div>Any man who reads too much and uses his own brain
too little falls into lazy habits of thinking.
<span class="quote_author">Albert Einstein</span></div>
<div>Do not be anxious about tomorrow, for tomorrow will be
anxious for itself.
<span class="quote_author">Jesus of Nazareth</span></div>
<div>A successful man is one who can lay a firm foundation
with the bricks others have thrown at him.
<span class="quote_author">David Brinkley</span></div>
<script type="text/javascript">
$('go_bold').addEvent('click', function() {
// set the borders on the div elements
$$('div').setStyle('border','1px solid #ABABAB');
$$('.quote_author').setStyle('font-weight','bold');
});
$('go_div').addEvent('click', function() {
// use an object to set many style properties at once
$$('.quote_author').setStyles({
'display': 'block',
'text-decoration': 'underline',
'font-weight': 'bold',
'font-style': 'italic',
'font-size': '18px',
'margin': '5px 0 20px 5px'
});
});
</script>
How it works...
We use classes to grab groups of elements rather than attempting to grab each individual element by unique ID.