如何用JavaScript修改textarea输入内容中元素的CSS宽度？

问题场景 #

我是编程学习者，希望通过JavaScript修改输入到textarea中的HTML元素的CSS宽度，实现代码如下：

<textarea name="" id="content" cols="75" rows="10"></textarea>
<button id="btn">submit</button>
<div id="contentHere"></div>
<button id="btn2">style change</button>

<script>
  document.getElementById("btn").addEventListener('click', input);
  function input() {
    const textareaValue = document.getElementById('content').value;
    document.getElementById('contentHere').innerHTML = textareaValue;
  }

  document.getElementById("btn2").addEventListener('click', changeWidth);
  function changeWidth() {
    const test2 = document.document.getElementsByClassName('test').firstChild;
    document.test2.style.width = "1000px"
  }
</script>

我会在textarea中输入以下HTML内容：

<div class="test">
 <table width=500px>
  <tr>
   <td>
    abc
   </td>
  </tr>
 </table>
</div>

运行时出现报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')
at HTMLButtonElement.test2

错误原因与修复方案 #

错误点分析

1. 无效DOM调用：document.document是不存在的属性，这是报错的直接原因，正确根DOM对象就是document，更精准的做法是从插入内容的容器contentHere中查找元素（输入的HTML会插入到这个容器）。
2. 集合用法错误：getElementsByClassName返回HTMLCollection集合，没有firstChild属性，应使用[0]取第一个元素，或用querySelector更简洁获取单个元素。
3. 元素引用错误：document.test2是无效写法，需直接使用获取到的元素变量修改样式。
4. 目标元素偏差：原代码尝试修改test类的div，但输入的HTML中表格自带width=500px属性，若要修改表格宽度需明确目标。

修正后的核心函数

将changeWidth函数替换为：

function changeWidth() {
  // 从指定容器中查找目标元素，避免全局查找干扰
  const testElement = document.getElementById('contentHere').querySelector('.test');
  if (testElement) {
    // 修改div的宽度
    testElement.style.width = "1000px";
    // 可选：修改内部表格宽度，同时移除原生width属性避免优先级冲突
    const table = testElement.querySelector('table');
    if (table) {
      table.style.width = "1000px";
      table.removeAttribute('width');
    }
  }
}

完整修正代码

<textarea name="" id="content" cols="75" rows="10"></textarea>
<button id="btn">submit</button>
<div id="contentHere"></div>
<button id="btn2">style change</button>

<script>
  document.getElementById("btn").addEventListener('click', input);
  function input() {
    const textareaValue = document.getElementById('content').value;
    document.getElementById('contentHere').innerHTML = textareaValue;
  }

  document.getElementById("btn2").addEventListener('click', changeWidth);
  function changeWidth() {
    const testElement = document.getElementById('contentHere').querySelector('.test');
    if (testElement) {
      testElement.style.width = "1000px";
      const table = testElement.querySelector('table');
      if (table) {
        table.style.width = "1000px";
        table.removeAttribute('width');
      }
    }
  }
</script>

注意事项 #

• 必须先点击submit按钮插入HTML内容，再点击style change，否则会找不到目标元素。
• 表格原生width属性优先级高于行内样式，需移除该属性才能让CSS样式生效。

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