实现标题粗、斜、下划线即时预览

作者:vkvi 来源:ITPOW(原创) 日期:2010-6-9

一些 CMS 系统可以在添加内容时指定标题的粗体、斜体、下划线等,以强调标题。

本示例是用 ezj 演示这种实现方式的即时预览,即在添加内容时即可看到效果。

HTML 代码

<div><input type="text" id="title" value="ITPOW" /></div>
<div>
  <input type="checkbox" id="boldStyle" />粗体
  <input type="checkbox" id="italicStyle" />斜体
  <input type="checkbox" id="underlineStyle" />下划线
</div>

ezj 实现代码

<script type="text/javascript" src="ezj.js"></script>
<script type="text/javascript">
<!--
$("boldStyle").addListener("click", function(){
    $("title").element.style.fontWeight = $("boldStyle").element.checked ? "bold" : "normal";
});
$("italicStyle").addListener("click", function(){
    $("title").element.style.fontStyle = $("italicStyle").element.checked ? "italic" : "normal";
});
$("underlineStyle").addListener("click", function(){
    $("title").element.style.textDecoration = $("underlineStyle").element.checked ? "underline" : "none";
});
//-->
</script>

比如,这样在选择粗体后,文本框中的标题就会变粗。

另,实际上本文只用到了 ezj 很小的一部分。

ezj 官方网站

http://www.itpow.com/products/ezj/

相关文章