使用 JavaScript 读取 html/body 标签 margin-top答案

【问题标题】：Using JavaScript to read html / body tag margin-top使用 JavaScript 读取 html/body 标签 margin-top
【发布时间】：2012-12-16 18:52:21
【问题描述】：

我正在尝试从<html> 和<body> 标签中读取“marginTop”样式属性。 Chrome 开发者工具通过 in-HTML CSS 显示 margin-top：

<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>

但是，当我尝试这样的事情时：

console.debug(document.getElementsByTagName('html')[0].style.marginTop);
console.debug(document.getElementsByTagName('body')[0].style.marginTop);

在这两种情况下我都会得到空字符串。

jQuery 的offset() 函数可以正确检测边距。不幸的是，在这种情况下我不能使用 jQuery，它必须是纯 JavaScript。

如果有人能提供一些关于如何从 html 和 body 元素中读取 top margin 属性的见解，我将不胜感激。

【问题讨论】：

为什么在这种情况下无法使用 jquery？您可以随时查看获取边距的 jquery 方法。它在其系统的某个地方抓取属性
这是一个插件库。我无法控制它将在其中使用的环境。它不依赖 jQuery，仅为此将其添加到需求中会很愚蠢。

标签： javascript html css

【解决方案1】：

您可以通过以下方式解决：

var element = document.getElementsByTagName('html')[0],
    style = window.getComputedStyle(element),
    marginTop = style.getPropertyValue('margin-top');

jsFiddle

【讨论】：

【解决方案2】：

document 已经知道body 元素，所以：

window.getComputedStyle(document.body).getPropertyValue('margin-top');

【讨论】：