求助：如何创建带参数的JavaScript函数修改指定HTML元素的字号与颜色

没问题，咱们可以通过给函数传递参数的方式，轻松实现点击按钮时动态修改指定元素的颜色和字号。下面是完整的实现步骤和代码示例：

1. 完善HTML结构 #

首先补全你的HTML代码，给按钮的onclick事件传递颜色和字号参数，同时确保目标元素的ID正确（注意ID里的空格是允许的，但使用时要完全匹配）：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="script.js"></script>
    <meta charset="utf-8" />
    <title>调整标题样式</title>
</head>
<body>
    <!-- 目标元素：ID为"main header"的标题 -->
    <h1 id="main header">这是主标题</h1>
    
    <!-- 按钮：点击时传递颜色和字号参数给fontColor函数 -->
    <button type="button" onclick="fontColor('#ff4500', '28px')">设置橙色大字号</button>
    <button type="button" onclick="fontColor('darkblue', '18px')">设置深蓝色小字号</button>
</body>
</html>

2. 编写script.js中的fontColor函数 #

在外部脚本文件里定义fontColor函数，接收两个参数（颜色值和字号值），然后通过ID获取目标元素并修改其样式：

function fontColor(textColor, textSize) {
    // 获取ID为"main header"的元素（注意ID要完全匹配，包括空格）
    const targetElement = document.getElementById('main header');
    
    // 检查元素是否存在，避免报错
    if (targetElement) {
        // 设置文本颜色
        targetElement.style.color = textColor;
        // 设置字号（注意要带单位，比如px、em、rem等）
        targetElement.style.fontSize = textSize;
    } else {
        console.error('未找到ID为"main header"的元素');
    }
}

关键说明 #

• 参数传递：在onclick里直接把你想要的颜色和字号作为参数传给函数，颜色可以是十六进制值、RGB值、颜色名称（比如'red'），字号必须带单位（比如'24px'、'1.5em'）。
• 元素获取：document.getElementById的参数要和目标元素的ID完全一致，包括空格。如果可以的话，建议把ID改成main-header（无空格），这样更符合常规命名规范，代码里也不用处理空格的问题。
• 错误处理：加入了元素存在性检查，避免因为元素找不到而抛出JS错误，让代码更健壮。

你可以根据需求添加更多按钮，传递不同的参数来实现多种样式切换效果~

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