- MooTools 1.3 Cookbook
- Jay Larry G. Johnston
- 217字
- 2021-04-02 19:07:09
Styling the text within an element
We are often faced with a reason to style text on-the-fly using client-side code. MooTools makes that quite elementary with concepts found prominent in this very recipe!
Getting ready
Prepare to make the text in our SPAN stand out: by making it bold.
How to do it...
It is possible to set the styles of any text element quickly and easily.
<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<form action="" method="get">
<input id="go_bold" type="button" value="Bold Oscar"/>
<input id="go_div" type="button" value="Set Oscar Apart"/>
</form>
<br/>
<div>Every great man nowadays has his disciples,
and it is always Judas who writes the biography.
<span id="quote_author">Oscar Wilde</span></div>
<script type="text/javascript">
$('go_bold').addEvent('click', function() {
// set a style property of an element
$('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-style': 'italic',
'font-size': '18px',
'margin': '5px 0 0 5px'
});
});
</script>
How it works...
The Element.setStyle() method takes two parameters, the style property to alter and the new value for the property. In this example, we also use Element.setStyles(), which will take an object that can alter many style properties in one fell swoop.
推薦閱讀
- Ext JS 3.0 Cookbook
- Excel 2013電子表格處理
- 老郵差數碼照片處理技法 圖層篇
- SOLIDWORKS 2021中文版基礎入門一本通
- Premiere視頻編輯應用教程：PremierePro 2020（微課版）
- SPSS統計分析
- Photoshop CS6標準教程（全視頻微課版）
- Visio圖形設計從新手到高手（兼容版）
- 3D打印輕松實踐：從材料應用到三維建模
- Deep Inside osCommerce: The Cookbook
- HBase企業應用開發實戰
- Moodle 2.0 for Business Beginner's Guide
- SPSS統計分析與應用
- Adobe創意大學Premiere Pro CS5 影視剪輯師標準實訓教材
- CorelDRAW 2018平面設計基礎教程(第3版)