为什么range控件无法修改label元素的颜色、字号与字重？

• 没有绑定事件监听：你当前的JS代码仅会在页面首次加载时执行一次，后续拖动滑块、修改输入内容、选择颜色的操作都不会触发样式重新计算，自然看不到变化。
• fontSize缺少单位：CSS的fontSize属性必须携带单位（常用px），直接传入纯数字浏览器无法识别，规则不会生效。
• range控件属性错误：range的范围配置属性是min和max，不是你写的from和to，你设置的10-50尺寸范围根本没有生效。
• 字重滑块缺少合理配置：合法的fontWeight取值为100-900的整百数，你没有给字重的range设置对应范围、步长，默认返回的值可能不符合CSS规则要求。

先修改HTML中range控件的属性 #

<!-- 尺寸滑块修改属性，from/to替换为min/max，加默认值 -->
<input type="range" name="s" id="size" min="10" max="50" value="16"><br>
<!-- 字重滑块增加合理范围、步长、默认值 -->
<input type="range" name="w" id="weight" min="100" max="900" step="100" value="400"><br>

替换为修正后的JS代码 #

// 提前获取固定DOM元素，避免重复查询
const text = document.getElementById('word');
const dataInput = document.getElementById('data');
const sizeInput = document.getElementById('size');
const weightInput = document.getElementById('weight');
const colorInput = document.getElementById('color');

// 封装文本样式更新函数
function updateText() {
  // 每次触发时再读取输入控件的最新值
  const content = dataInput.value;
  const size = sizeInput.value;
  const weight = weightInput.value;
  const color = colorInput.value;

  // 更新文本内容
  if(content.trim()) text.innerText = content;
  // 更新样式，字号补px单位
  text.style.color = color;
  text.style.fontWeight = weight;
  text.style.fontSize = `${size}px`;
}

// 给所有输入控件绑定事件，修改时自动触发更新
[dataInput, sizeInput, weightInput, colorInput].forEach(item => {
  item.addEventListener('input', updateText);
})

// 页面加载时初始化一次样式
updateText();

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