如何使用setAttribute为HTML元素设置含{}格式的属性值

你写的setAttribute属性赋值语法本身没有问题，触发报错基本是两个高频场景：

• newAside变量没有拿到目标DOM元素。如果代码执行时机早于DOM渲染完成，或者元素选择器书写错误，会导致newAside值为null，此时调用null的setAttribute方法会直接抛出类型错误，这是这类问题最常见的诱因，占同类报错的90%以上。
• 传入的属性值格式不符合KT组件的解析规则。KT系列前端组件读取data-kt-*配置属性时，默认会把属性值作为JSON字符串解析，你手写的{default: true, lg: false}中对象键没有加双引号，不属于合法JSON格式，后续组件初始化解析配置时会抛出JSON格式错误，很容易被误判为setAttribute执行阶段的报错。

首先确保DOM加载完成后再获取目标元素，设置属性时传入合法JSON格式的配置值即可，两种常用写法如下：

// 方案1：原生setAttribute写法，推荐用JSON.stringify自动生成合法JSON，避免手写格式错误
document.addEventListener('DOMContentLoaded', () => {
  // 替换成你实际使用的元素选择器，确保能匹配到目标节点
  const newAside = document.querySelector('aside目标选择器');
  // 加存在性判断兜底，避免元素不存在时抛出错误
  if (newAside) {
    newAside.setAttribute(
      'data-kt-drawer-activate',
      JSON.stringify({ default: true, lg: false })
    );
  }
})

// 方案2：使用标准dataset API操作data-*自定义属性，写法更简洁
document.addEventListener('DOMContentLoaded', () => {
  const newAside = document.querySelector('aside目标选择器');
  if (newAside) {
    // data-*属性对应的dataset键名采用驼峰格式转换
    newAside.dataset.ktDrawerActivate = JSON.stringify({ default: true, lg: false });
  }
})

注意：如果是在KT抽屉组件初始化完成后再修改该属性，配置不会自动生效，需要调用组件实例的更新方法重新加载配置才会触发响应。

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