不朽情缘属于什么电子

書名： 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.

官术网_书友最值得收藏!

MooTools 1.3 Cookbook

Styling the borders of a group of elements

Getting ready

How to do it...

How it works...