jq
$("input").css({fontStyle:"italic"})
js
document.getElementById("input").style.fontStyle="italic"
1、可以通过 style 让整个文本框内容加粗,但没有办法单独改变部分文字的样式。
2、下面的代码只是个例子,可以实现将选择的文本加粗,但实际应用中考虑的问题还有很多,IE 9, Firefox 19, Chrome 26 下测试都没有问题,Safari 会出现移位错误,Opera 直接不支持。
<script language="javascript">window.onload = function() {
// iframe 窗口
var frameWin = document.getElementById('result').contentWindow
// iframe 页面
var frameDoc = frameWin.document
// 在 iframe 页面输出一些字符
frameDoc.body.innerHTML = 'Lorem ipsum dolor sit amet'
// 点击加粗
document.getElementById("bold").onclick = function() {
// 获取选择
var sel = frameDoc.getSelection()
// 获取选择的文字
var txt = sel.getRangeAt(0).extractContents().textContent
// 选择范围
range = sel.getRangeAt(0)
// 删除被选择的内容
range.deleteContents()
// 创建新的元素 strong
var bold = frameWin.document.createElement("strong")
// 设置 strong 内容
bold.innerHTML = txt
// 在被选择的位置添加加粗的元素
range.insertNode(bold)
}
}
</script> <iframe style="width:600px height:200px" id="result"></iframe>
<input type="button" id="bold" value="加粗" />