javascript - DOM元素的CSS默认样式

Question

可能重复：
浏览器对 HTML 元素的默认 CSS

DOM元素的所有默认样式是否有参考？

例如，an 上方的边距有多大<h1>？

有没有一些简单的方法来提取这个？我试过：

document.getElementById("myheading").style.marginTop

但它返回空白。大概是因为没有为marginTop?

提前致谢。

Answer 1

你有几个选择。规范有一个松散定义的列表。HTML4和HTML5

如果您希望实际查看计算样式，可以使用 Firebug、Chrome 开发者工具、IE 开发者工具或 Opera Dragonfly 之类的程序。

如果您需要以编程方式获取计算样式，我建议您使用 jquery 来消除差异，或者使用元素的 getComputedStyle() 或 currentStyle 属性。jQuery 会自动为您执行此操作。

如果你只是想知道如何处理这个跨浏览器而不发疯，我建议使用重置样式表。有许多。Eric Meyer 是最著名的，但现在有很多工具，如 Bootstrap、Blueprint、Normalize 和 YUI。

Answer 2

每个浏览器在其用户代理样式表中都有自己的实现。这个出色的答案包含 WebKit、Firefox/Gecko 和 IE 资源的链接。您可以使用window.getComputedStyle(node);. 请注意，此方法有一些例外情况（出于安全原因，访问过的链接将像未访问过一样返回）。

对于<h1>，这里是每个相关的 CSS

网络套件

display: block;
font-size: 2em;
-webkit-margin-before: 0.67__qem;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold

火狐/壁虎

display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;

IE6/7

display: block;
font-size: 24pt;
font-weight: bold;
margin: 14pt 0;

IE8/9

display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
page-break-after: avoid;