如何用JS实现 点击按钮 文本框内的文字加粗？

JavaScript07

如何用JS实现 点击按钮 文本框内的文字加粗？,第1张

实现点击按钮文本框内文字加粗的方式有以下两种方式：

1、直接修改或者添加css样式：

$("button").click(function(){

  $("input").css("font-weight","bold")

})

2、添加相应的class类名使其加粗：

$("button").click(function(){

  $("input").addClass("fontbold")

}) .fontbold{font-weight:bold}

是要把代码加粗，还是代码生成文字加粗？

代码生成的文字加粗

document.getElementById("showsectime").innerHTML = "<b>本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</b>"

只需要在你输出的文字前后加上<b></b>标签就可以了

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="加粗" />