setProperty 和直接赋值（如 element.style.property = value）都是 JavaScript 中设置 DOM 元素样式的方法，但它们在功能和使用场景上有重要区别：

核心区别

  1. 优先级控制

    • setProperty：支持通过第三个参数设置 !important 优先级
    • 直接赋值：无法设置 !important，只能设置普通样式

  2. 属性名格式

    • setProperty：使用标准 CSS 属性名（如 padding-right）
    • 直接赋值：需使用驼峰式命名（如 paddingRight）

  3. 功能灵活性

    • setProperty：更灵活，支持动态属性名和值
    • 直接赋值：属性名固定，只能赋值特定格式的值

具体对比

1. 设置带 !important 的样式

// 使用 setProperty
document.body.style.setProperty('padding-right', '0', 'important');// 直接赋值 - 无法设置 !important
// 以下代码不会生效
document.body.style.paddingRight = '0 !important';

2. 动态设置属性

// 使用 setProperty 可动态设置属性名
const propName = 'padding-right';
document.body.style.setProperty(propName, '0');// 直接赋值需要使用计算属性名
const propName = 'paddingRight';
document.body.style[propName] = '0';

3. 获取样式值

// setProperty 没有返回值
const result = document.body.style.setProperty('padding-right', '0'); // undefined// 直接赋值会返回设置的值
const result = document.body.style.paddingRight = '0'; // '0'

示例

比如在我们在使用el-dialog功能时，el-dialog会默认给body添加padding-right:8px，这样的化会导致我们使用fixed实行定位时出现抖动：此时我们就可以使用MutationObserver监听dom元素结合setProperty重置body样式