点击按钮实现textarea文本粗体/斜体功能失效，附代码求助

你的代码核心错误在于：你试图给textarea的文本内容（字符串）设置样式，但字符串没有style属性。textArea.value返回的是纯文本字符串，不是DOM元素，所以textAreaValue.style.fontWeight这行代码完全不起作用。

修复方案1：让整个textarea文本变粗 #

如果只是想让textarea里的所有文本显示为粗体，直接操作textarea元素的style即可：

修复后的代码 #

<textarea cols="30" rows="10" id="textAreaText"></textarea>
<button id="btn-bold">bold</button>
<button id="btn-italic">italic</button>

<script>
document.getElementById('btn-bold').addEventListener('click', function (){
    const textArea = document.getElementById('textAreaText');
    // 直接操作textarea元素的style，支持切换粗体/正常状态
    textArea.style.fontWeight = textArea.style.fontWeight === 'bold' ? 'normal' : 'bold';
});

// 补充斜体功能的实现
document.getElementById('btn-italic').addEventListener('click', function (){
    const textArea = document.getElementById('textAreaText');
    textArea.style.fontStyle = textArea.style.fontStyle === 'italic' ? 'normal' : 'italic';
});
</script>

修复方案2：给选中的文本添加粗体格式（富文本效果） #

如果你的需求是给选中的部分文本添加粗体（类似Word的加粗功能），那么textarea无法实现（因为它是纯文本容器），需要换成contenteditable="true"的div元素，然后用富文本命令处理：

<div contenteditable="true" id="editor" style="border:1px solid #ccc; min-height:150px; padding:8px;"></div>
<button id="btn-bold">bold</button>
<button id="btn-italic">italic</button>

<script>
document.getElementById('btn-bold').addEventListener('click', function (){
    // 执行加粗命令，自动给选中文本包裹<strong>标签
    document.execCommand('bold', false, null);
});

document.getElementById('btn-italic').addEventListener('click', function (){
    document.execCommand('italic', false, null);
});
</script>

说明：document.execCommand虽被标记为废弃，但目前主流浏览器仍稳定支持；若需更现代的实现，可通过Selection和Range API手动给选中内容包裹<strong>/<em>标签。

内容的提问来源于stack exchange，提问作者Adiba Mubasshirah