2013-02-04 2 views
0

가능한 중복 :
Browsers' default CSS for HTML elementsCSS의 기본 스타일

참조 어딘가에 DOM 요소의 모든 기본 스타일의이 있습니까? 예를 들어

, <h1> 위의 마진이 얼마나 큰입니까?

이것을 추출하는 쉬운 방법이 있습니까? 나는 시도했다 :

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

그러나 그것은 비어있게되었다. 아마도 marginTop에 대해 정의 된 것이 없기 때문에 아마도?

미리 감사드립니다.

+2

이가 CSS 2.1 (W3)에 의해 제공됩니다 : http://www.w3.org/TR/CSS21/sample.html – PlantTheIdea

+0

@LifeInTheGrey ... 가장하지 않은 최신 버전의 HTML 사양. –

+2

@Matt - CSS 2.1은 CSS의 최신 공식 버전입니다. 나는 링크를 클릭하는 것을 괴롭히지 않는 사람들이 불평하지 않도록 내 구술을 편집했다. – PlantTheIdea

답변

2

몇 가지 옵션이 있습니다. 스펙에는 느슨하게 정의 된 목록이 있습니다. HTML4HTML5

계산 된 스타일을 실제로 보려면 Firebug, Chrome 개발자 도구, IE 개발자 도구 또는 Opera Dragonfly와 같은 프로그램을 사용할 수 있습니다.

계산 된 스타일을 프로그래밍 방식으로 가져와야하는 경우 jquery를 사용하여 차이를 균일하게 만들거나 요소의 getComputedStyle() 또는 currentStyle 특성을 사용하는 것이 좋습니다. jQuery가 자동으로이 작업을 수행합니다.

미쳐하지 않고이 크로스 브라우저를 처리하는 방법을 알고 싶다면 스타일 시트 재설정을 사용하는 것이 좋습니다. 많이있다. Eric Meyer 's가 가장 유명하지만 요즘에는 Bootstrap, Blueprint, Normalize 및 YUI와 같은 다양한 도구가 있습니다.

+0

을 통해 확인하실 수 있습니다. 재설정은 좋은 방법이지만, 더 좋은 방법 (IMHO)은 Normalize.css입니다 . 리셋과 같이 처음부터 다시 시작하지 않고 개별 브라우저의 단점을 제거하여 모든 브라우저에서 비슷한 경험을 만들려고합니다. – PlantTheIdea

+0

입력 해 주셔서 감사합니다. 나는 그 대답에 덧붙였다. – Jordan

1

각 브라우저의 구현 내용은 사용자 에이전트 스타일 시트입니다. This excellent answer에는 WebKit, Firefox/Gecko 및 IE 용 리소스에 대한 링크가 있습니다. window.getComputedStyle(node);을 사용하여 (렌더링 된) DOM 노드에서 값을 발견 할 수 있습니다. 이 메소드에는 몇 가지 예외가 있습니다 (방문한 링크는 보안상의 이유로 방문하지 않은 것처럼 반환됩니다). <h1>를 들어

, 여기에 각

Webkit

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 

Firefox/Gecko

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

IE6/7

display: block; 
font-size: 24pt; 
font-weight: bold; 
margin: 14pt 0; 
,174에 대한 관련 CSS입니다

IE8/9

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