解决Cannot set properties of undefined (setting 'css')错误：动态修改圆形样式

错误原因分析 #

• 元素获取错误：document.getElementsByClassName("circle") 返回的是HTMLCollection（类数组元素集合），不是单个DOM元素，直接访问circle.style会得到undefined，从而触发报错。
• 样式设置语法错误：DOM元素的样式对象没有css属性，正确批量设置样式应该用style.cssText，或者单独设置每个样式属性。
• 冗余事件绑定：window.onchange属于多余绑定，会干扰输入框的事件逻辑。
• 值类型隐患：输入框的value是字符串类型，直接使用可能导致样式解析异常，建议转为数字类型。

修复后的代码 #

window.addEventListener("DOMContentLoaded", (event) => {
  const inputsize = document.getElementById("size");
  const inputcolor = document.getElementById("color");
  // 获取单个circle元素（若页面只有一个，取集合第一个元素）
  const circle = document.getElementsByClassName("circle")[0];
  // 也可用更简洁的querySelector：const circle = document.querySelector(".circle");

  let size = 100;
  let color = "#b66465";

  // 封装样式更新函数，避免重复代码
  function updateCircleStyle() {
    // 方法1：用cssText批量设置样式
    circle.style.cssText = `height: ${size}px; width: ${size}px; background-color: ${color};`;
    // 方法2：单独设置每个样式属性（更推荐，可读性更强）
    // circle.style.height = `${size}px`;
    // circle.style.width = `${size}px`;
    // circle.style.backgroundColor = color;
  }

  inputcolor.onchange = (event) => {
    color = inputcolor.value;
    updateCircleStyle();
  };

  inputsize.onkeyup = (event) => {
    // 转成数字，空输入时用默认值100兜底
    size = parseInt(inputsize.value, 10) || 100;
    updateCircleStyle();
  };

  // 初始化圆形样式
  updateCircleStyle();
});

关键修改点说明 #

1. 正确获取单个DOM元素：
   • 若页面只有一个.circle元素，用[0]从集合中取第一个元素，或用document.querySelector(".circle")直接获取单个元素。
   • 若有多个.circle，需要遍历集合逐个设置样式。
2. 样式设置方式修正：
   • 使用style.cssText批量设置样式，或单独设置height、width、backgroundColor属性（后者更易维护）。
3. 代码复用优化：封装updateCircleStyle函数，避免重复编写样式设置逻辑。
4. 值类型处理：将输入框的字符串值转为数字，避免空输入或非数字输入导致样式异常。

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