如何在JavaScript中修改答案字体大小（无法修改CSS文件）

安全阿岳

2026-8-8

修改答题模块答案字体大小的方法

因为你无法修改CSS文件，直接通过JavaScript给答案元素添加内联样式是最直接的解决方案，优先级高于外部CSS，能确保生效。下面分两种场景给出具体代码：

场景1：渲染答案时直接设置样式

如果你是通过JavaScript动态生成答案元素（比如从questions数组渲染到页面），可以在创建元素的同时设置字体大小：

// 遍历题目数组渲染内容
questions.forEach(question => {
  // 先渲染题目（示例代码，根据你的实际结构调整）
  const questionEl = document.createElement('h3');
  questionEl.textContent = question.question;
  document.body.appendChild(questionEl);

  // 遍历每个答案并设置样式
  question.answers.forEach(answer => {
    // 创建答案元素（这里用div，你可以换成button或其他标签）
    const answerEl = document.createElement('div');
    answerEl.textContent = answer.text;
    
    // 核心：设置字体大小，改成你需要的数值（比如20px、1.2rem）
    answerEl.style.fontSize = '18px';
    
    // 可选：如果需要区分正确/错误答案，可以额外加样式
    if (answer.correct === 'true') {
      answerEl.style.color = 'green';
    }

    document.body.appendChild(answerEl);
  });
});

场景2：页面已渲染完成后修改样式

如果答案元素已经在页面上了，你可以通过选择器选中所有答案元素，批量设置样式：

// 假设所有答案元素有统一的类名（比如.answer-item），用querySelectorAll选中
const allAnswers = document.querySelectorAll('.answer-item');
allAnswers.forEach(item => {
  // 设置字体大小
  item.style.fontSize = '18px';
});

// 如果没有统一类名，也可以根据父容器或标签选择，比如：
// const allAnswers = document.querySelectorAll('.question-block > div');
// allAnswers.forEach(item => item.style.fontSize = '18px');