多姿多彩的textarea

最新推荐文章于 2016-06-02 13:02:54 发布

转载最新推荐文章于 2016-06-02 13:02:54 发布 · 1.3k 阅读

文章标签：

#div #测试

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章

订阅专栏

本文介绍了一种使用JavaScript将Textarea中的文字以多种样式展示的方法。通过在Textarea内动态创建并添加Div元素，可以实现包括不同字体、颜色及大小在内的多样化文本显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前从来没有想到还可以把textarea的内容显示的各式各样,以为只能显示单一颜色的文字.今天在经典论坛看到一贴,顿时惊喜,利用一些js可以实现textarea显示各式各样的效果.
主要思想通过动态创建一个div并将要显示的内容放到这个div中,然后把它添加未textarea的一个子结点即可.
代码如下:

<center>
<textarea id="tx" style="width:534;height:188;"></textarea>
<script type="text/javascript">
var d1=document.createElement("div");
d1.style.color="blue";
d1.innerHTML="<font size=5px face=华文行楷>像我这样，保持微笑，你就会发现：困难不再成为困难。</font><button style=padding-top:3px;font-size:12px;font-family:华文彩云;background-color:#11FF00>爱的声音传得很远, 讲述她伤心的昨天..</button>"

document.getElementById("tx").appendChild(d1);
var d2=document.createElement("div");
d2.style.color="red";
d2.innerHTML="<font size=8px face=隶书>测试红色字体</font><img src=http://www.blueidea.com/articleimg/usericon/sheneyan.gif>"
document.getElementById("tx").appendChild(d2);
</script>