如何用javascript实现对文本域加粗,斜体和下划线效果的设置

一、如何用javascript实现对文本域加粗,斜体和下划线效果的设置

1、可以通过style让整个文本框内容加粗，但没有办法单独改变部分文字的样式。

2、下面的代码只是个例子，可以实现将选择的文本加粗，但实际应用中考虑的问题还有很多，IE9,Firefox19,Chrome26下测试都没有问题，Safari会出现移位错误，Opera直接不支持。

<scriptlanguage="javascript">

varframeWin=document.getElementById('result').contentWindow;

varframeDoc=frameWin.document;

frameDoc.body.innerHTML='Loremipsumdolorsitamet';

document.getElementById("bold").onclick=function(){

varsel=frameDoc.getSelection();

vartxt=sel.getRangeAt(0).extractContents().textContent;

varbold=frameWin.document.createElement("strong");

//在被选择的位置添加加粗的元素

</script>

<iframestyle="width:600px;height:200px"id="result"></iframe>

<iframestyle="width:600px;height:200px"id="result"></iframe>

<inputtype="button"id="bold"value="加粗"/>

二、js 下划线

新建一个html文件，命名为test.html，用于讲解js如何给p标签内容添加下划线。

在test.html文件内，使用p标签创建一行文字，用于测试。

在test.html文件内，设置p标签的id为test。

在test.html文件内，创建一个按钮，给它绑定onclick事件，点按钮被点击时，执行changeDec()函数。

在js标签内，创建changeDec（）函数，在函数内，通过id获得p标签对象，设置其textDecoration属性为underline，从而实现下划线的设置。

在浏览器打开test.html文件，点击按钮，查看结果。

1、使用p标签创建一行文字，设置p标签的id为test。

2、创建一个按钮，给它绑定onclick事件，点按钮被点击时，执行changeDec()函数。

3、在js标签内，创建changeDec（）函数，在函数内，通过id获得p标签对象，设置其textDecoration属性为underline，从而实现下划线的设置。

4、在浏览器打开test.html文件，点击按钮，查看结果。