[css] CSS 표시 속성을 기본값으로 재설정

브라우저의 기본 스타일은 사용자 에이전트 스타일 시트에 정의되어 있으며 소스는 여기서 찾을 수 있습니다 . 불행히도 Cascading and Inheritance 레벨 3 사양 은 스타일 속성을 브라우저 기본값으로 재설정하는 방법을 제안하지 않는 것 같습니다. 그러나 Cascading and Inheritance 레벨 4 에서 키워드를 다시 도입 할 계획이 있습니다 . 실무 그룹은이 키워드의 이름을 아직 정하지 않았습니다 (링크는 현재 revert최종 결과는 아닙니다). 브라우저 지원에 대한 정보는 caniuse.comrevert 에서 찾을 수 있습니다 .

레벨 3 스펙은 initial키워드를 도입하지만 속성을 초기 값으로 설정 하면 브라우저에서 정의한 것이 아니라 CSS 에서 정의한대로 기본값으로 재설정 합니다 . 초기 값 display은 inline; 여기 에 지정되어 있습니다 . initial키워드는 그 값이 아닌 브라우저의 기본을 의미합니다. 사양 자체는 all속성 아래 에이 메모를합니다 .

예를 들어, 작성자 all: initial가 요소를 지정 하면 캐스케이드의 작성자, 사용자 또는 사용자 에이전트 레벨에 규칙이없는 것처럼 모든 상속을 차단하고 모든 특성을 재설정합니다.

외부 페이지의 스타일을 상속하지 않으려는 페이지에 포함 된 “위젯”의 루트 요소에 유용 할 수 있습니다. 그러나 해당 요소에 적용되는 “기본”스타일 (예 : display: block와 같은 블록 요소의 UA 스타일 시트 <div>)도 날아갑니다.

따라서 현재 순수 CSS를 사용하는 유일한 방법은 브라우저 기본값을 찾아 수동으로 설정하는 것입니다.

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(위의 대안은 div.foo:not(.bar) { display: inline-block; }이지만 재정의 대신 원래 선택기를 수정하는 것입니다.)

답변

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'