javascript - 通过 querySelector 从 CSS 获取值

Question

我试图通过 querySelector 获取 CSS 类的特定值，但仍然找不到解决方案:

我要获取的是“40px”值:

function onS(obj) {
  var logo = document.querySelector('.logo');
  var value = logo.style.marginLeft;
  alert(value);
}

.logo { display: block; position: relative; margin-left: 40px; }

<div class="logo" onmouseover="onS(this)">Test!</div>

有什么办法吗？

Answer 1

logo.style只看内联 style属性，它不会获得计算样式。

从 <style> 中获取 CSS 值标记或外部样式表，使用 window.getComputedStyle()

function onS(obj) {
  var logo = document.querySelector('.logo');
  var value = window.getComputedStyle(logo).marginLeft;
  alert(value);
}

.logo { display: block; position: relative; margin-left: 40px; }

<div class="logo" onmouseover="onS(this)">Test!</div>