为什么我编写的修改元素样式的JavaScript代码无法正常运行？

问题原因 #

• 函数命名冲突：自定义函数名style和内联事件执行上下文内的按钮元素style属性重名，触发点击时style会被识别为CSS样式对象而非可执行函数，调用会抛出类型错误。
• 目标DOM元素未正确获取：代码中直接使用的Text变量未定义，即使依赖浏览器隐式挂载id元素到全局的特性，目标元素id为小写text，对应全局变量也是小写text，大写Text属于未声明变量，访问会抛出引用错误。

解决方法 #

步骤1：修改函数命名避免冲突 #

将自定义样式修改函数名改为不会和内置属性重名的名称，例如changeTextStyle，同步修改按钮onclick属性中的调用函数名。

步骤2：主动获取DOM元素 #

在函数内主动通过DOM API获取目标元素，代码可靠性更高，避免依赖浏览器隐式挂载的不稳定特性。

修改后完整代码 #

HTML代码

<body>
<p id="text">Change my style</p>
<div>
    <button id="jsstyles" onclick="changeTextStyle()">Style</button>
</div>
</body>

JavaScript代码

function changeTextStyle() {
  const textElement = document.getElementById('text');
  textElement.style.fontSize = "14pt";
  textElement.style.fontFamily = "Comic Sans MS";
  textElement.style.color = "red";
}

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