如何通过CSS/LESS利用类修改其他Canvas元素宽度？

方案一：CSS + 极简JS（推荐，依赖CSS :has选择器） #

利用CSS的:has选择器可以简洁实现需求，无需在JS里手动控制非选中元素样式：

样式部分

/* 所有Canvas的默认样式，可按需调整默认宽度 */
canvas {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  transition: width 0.3s ease; /* 添加入场过渡，提升交互体验 */
  display: inline-block;
  margin: 0 8px;
}

/* 当页面存在选中的Canvas时，未选中元素宽度变为100px */
body:has(.selected) canvas:not(.selected) {
  width: 100px;
}

交互逻辑部分

const allCanvases = document.querySelectorAll('canvas');

allCanvases.forEach(canvas => {
  canvas.addEventListener('click', () => {
    // 先移除所有Canvas的选中状态
    allCanvases.forEach(c => c.classList.remove('selected'));
    // 给当前点击的Canvas添加选中类
    canvas.classList.add('selected');
  });
});

方案二：纯JS控制（兼容不支持:has的旧浏览器） #

如果需要兼容不支持:has选择器的环境，可直接在JS中控制每个Canvas的宽度：

const allCanvases = document.querySelectorAll('canvas');
const DEFAULT_WIDTH = '300px'; // 替换为你的默认宽度值

allCanvases.forEach(canvas => {
  canvas.addEventListener('click', () => {
    allCanvases.forEach(c => {
      if (c === canvas) {
        c.classList.add('selected');
        c.style.width = DEFAULT_WIDTH; // 恢复默认宽度
      } else {
        c.classList.remove('selected');
        c.style.width = '100px';
      }
    });
  });
});

说明 #

• 方案一的:has选择器已被现代主流浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），代码简洁且样式与逻辑分离。
• 方案二兼容性更强，适合需兼容旧版浏览器的场景。

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