无ID的label标签修改样式属性实现隐藏的问题咨询

方案1：动态注入CSS（最稳妥，无需等待元素加载） #

无需提前捕获元素节点，插入样式后所有匹配类的元素渲染时会自动应用隐藏规则，适配动态加载的元素场景：

// 创建自定义样式标签
const customStyle = document.createElement('style');
// 写入隐藏规则，不需要保留占位用display:none，需要保留占位替换为visibility: hidden
customStyle.textContent = `.dhx_fullday { display: none !important; }`;
// 插入到页面头部生效
document.head.appendChild(customStyle);

方案2：调整JS执行时机，直接操作元素样式 #

如果必须通过JS修改元素的style属性，根据元素的加载场景选择对应处理逻辑：

• 元素属于页面初始DOM内容，仅因JS执行时机过早导致找不到：将逻辑包裹在DOM加载完成的回调中

document.addEventListener('DOMContentLoaded', () => {
  const targetLabel = document.querySelector('.dhx_fullday');
  // 增加元素存在判断，避免无对应元素时报错
  if (targetLabel) {
    targetLabel.style.visibility = 'hidden';
  }
});

说明：querySelector匹配单个类名元素比getElementsByClassName写法更简洁

• 元素是异步动态渲染的（比如日历组件交互后才生成的弹窗元素）：使用MutationObserver监听DOM变化，元素生成后自动执行隐藏操作

// 可替换为已知的目标元素父节点（比如document.getElementById('area')），缩小监听范围提升性能
const observer = new MutationObserver((mutations) => {
  const targetLabel = document.querySelector('.dhx_fullday');
  if (targetLabel) {
    targetLabel.style.visibility = 'hidden';
    // 找到目标元素后停止监听，减少性能消耗
    observer.disconnect();
  }
});

// 启动DOM变化监听
observer.observe(document.body, {
  childList: true,
  subtree: true
});

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