如何检测div的margin值？获取响应式布局下div的margin-left方法

你使用m-auto实现的水平居中div，margin-left是浏览器自动计算的动态值，可通过以下方式获取：

1. 单次获取当前margin-left值 #

使用原生JS的getComputedStyle方法，可直接拿到元素最终渲染后的计算样式，包含浏览器自动生成的margin值：

// 获取目标DOM元素
const targetDiv = document.querySelector('.max-w-6xl.m-auto')
// 读取元素计算后样式
const computedStyle = window.getComputedStyle(targetDiv)
// 获取带px单位的margin-left字符串
const marginLeftVal = computedStyle.marginLeft
// 如需纯数值可做转换
const marginLeftNum = parseFloat(marginLeftVal)
console.log('当前margin-left：', marginLeftVal, '数值：', marginLeftNum)

2. 实时监听margin-left变化 #

如果需要在margin值变动时自动触发业务逻辑，可使用以下两种方案：

• 方案1：监听窗口resize事件
  你的场景中margin变化由窗口尺寸变动触发，直接监听resize事件即可，建议增加防抖优化性能：

  // 防抖函数
  function debounce(func, delay = 200) {
    let timer = null
    return function(...args) {
      clearTimeout(timer)
      timer = setTimeout(() => func.apply(this, args), delay)
    }
  }
  // 绑定窗口变化监听
  window.addEventListener('resize', debounce(() => {
    const targetDiv = document.querySelector('.max-w-6xl.m-auto')
    const marginLeft = parseFloat(window.getComputedStyle(targetDiv).marginLeft)
    // 此处写你的业务逻辑
    console.log('margin-left更新为：', marginLeft)
  }))
  

• 方案2：用ResizeObserver监听元素本身
  如果存在窗口resize之外的margin变动场景，可直接监听元素本身的尺寸/布局变化，更精准：

  const targetDiv = document.querySelector('.max-w-6xl.m-auto')
  const observer = new ResizeObserver(entries => {
    for (let entry of entries) {
      const marginLeft = parseFloat(window.getComputedStyle(entry.target).marginLeft)
      // 此处写你的业务逻辑
      console.log('元素margin更新为：', marginLeft)
    }
  })
  // 启动监听
  observer.observe(targetDiv)
  // 不需要时销毁监听避免内存泄漏
  // observer.unobserve(targetDiv)
  

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