JavaScript自定义元素样式设置函数运行失效问题求助

常见失效原因 #

• 样式属性名格式错误：styles对象的属性必须使用驼峰命名，不能直接用CSS原生短横线命名。例如需要写fontSize而非font-size，el.style对象本身的所有可读写属性均为驼峰格式，短横线命名的键无法匹配到对应属性，赋值会失效。
• 入参不合法：第一个参数el必须是已挂载的真实DOM元素，如果传入null、undefined或者普通对象/节点列表，访问el.style时会报错或赋值无效。
• 包含CSS自定义属性（CSS变量）：原生Object.assign无法直接给el.style赋值--xxx格式的CSS变量，这类属性需要通过style.setProperty()方法单独设置。
• 样式值缺单位：需要带单位的属性（如width、margin等）如果只传数字（如width: 100）会被识别为无效值，必须携带单位写为width: '100px'。

兼容优化版本代码 #

const addStyles = function (el, styles) {
  // 入参合法性校验，避免报错
  if (!el?.style || typeof styles !== 'object' || styles === null) return
  Object.entries(styles).forEach(([key, value]) => {
    // 兼容短横线命名、CSS变量的场景
    if (key.includes('-') || key.startsWith('--')) {
      el.style.setProperty(key, value)
    } else {
      el.style[key] = value
    }
  })
}

正确调用示例 #

const targetEl = document.querySelector('#target')
addStyles(targetEl, {
  height: '150px',
  border: '1px solid #ccc',
  '--bg-color': '#f5f5f5',
  'border-radius': '8px'
})

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