디스플레이 속성을 기본값으로 재정의 할 수 있습니까? 예를 들어 한 스타일에서 none으로 설정하고 기본값과 다른 스타일로 재정의하려는 경우.
또는 해당 요소의 기본값이 무엇인지 찾아서 설정하는 유일한 방법입니까? 요소가 일반적으로 블록인지, 인라인인지 또는 둘 중 하나인지 알 필요가 없습니다.
답변:
브라우저의 기본 스타일은 사용자 에이전트 스타일 시트에 정의되어 있으며 소스는 여기서 찾을 수 있습니다 . 불행히도 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; }이지만 재정의 대신 원래 선택기를 수정하는 것입니다.)
initial실제로 실제로 잘못 해석 한 것으로 나타났습니다 . 내 답변을 업데이트했습니다.
display항상 inline( w3.org/TR/CSS21/visuren.html#display-prop ) 입니다. 요소는 기본적으로 HTML에 따라 , 그리고 CSS는, 그래서 말을 브라우저의 UA 스타일 시트까지입니다 . divspandivdisplay: blockdiv { display: block; }
default로 이름이 변경되었습니다 revert.
자바 스크립트 사용이 허용되는 경우display 속성을 빈 문자열로 설정할 수 있습니다 . 이로 인해 특정 요소의 기본값이 사용됩니다.
var element = document.querySelector('span.selector');
// Set display to empty string to use default for that element
element.style.display = '';다음은 jsbin에 대한 링크 입니다.
당신은 (로 되돌릴 디스플레이의 종류에 대해 걱정할 필요가 없기 때문에 이것은 좋은이다 block, inline, inline-block, table-cell, 등).
그러나 자바 스크립트가 필요하므로 CSS 전용 솔루션을 찾고 있다면 이것이 당신을위한 해결책이 아닙니다.
참고 : 이것은 인라인 스타일을 재정의하지만 CSS에 설정된 스타일은 재정의하지 않습니다.
style속성을 사용하여 처음 설정된 경우에만 작동합니다 . 이 메소드를 사용하여 스타일 시트에서 선언을 대체하거나 제거 할 수 없습니다.
style속성 또는 JavaScript setter를 통해 적용된 스타일 만 제거됩니다 . JS를 통해 특정 값을 설정하면 스타일 시트 선언을 무시할 수 있지만 값을 비워 두는 것은 전혀 설정하지 않는 것과 같습니다. 스타일 시트 선언은 그대로 유지됩니다. 수정 된 바이올린 참조 : jsfiddle.net/BoltClock/g45qagt3/1
display:Firefox 및 Chromeunset 모두에서 작동 하는 값 을 사용할 수 있습니다 .
display: unset;.foo { display: none; }
.foo.bar { display: unset; }unset속성별로 도움이되지 않으며 항상 디스플레이를으로 재설정합니다 inline. 답변 업데이트를 고려하십시오.
아니요, 일반적으로 불가능합니다. 일부 CSS (또는 HTML) 코드가 요소의 속성 값을 설정하면 실행 취소하고 브라우저에 기본값을 사용하도록 지시 할 수있는 방법이 없습니다.
이 속성 당신이하는 값으로 설정하는 것도 가능하다 기대 기본 값으로한다. HTML5 CR 의 렌더링 섹션 을 확인하면 브라우저가 실제로하는 일을 대부분 반영 할 때 다소 광범위하게 작동 할 수 있습니다 .
브라우저는 원하는 기본값을 가질 수 있기 때문에 대답은“아니요”입니다. 기본값으로 재설정하려는 이유를 분석해야합니다. 원래 문제가 계속 풀수있을 수 있습니다.
경우 액세스 권한이 자바 스크립트를 사용하면 요소를 작성하고 계산 된 스타일을 읽을 수 있습니다.
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'BoltClock과 John의 답변과 관련하여 IE11을 사용할 때 개인적으로 초기 키워드에 문제가있었습니다. Chrome에서는 제대로 작동하지만 IE에서는 효과가없는 것 같습니다.
이 답변에 따르면 IE는 초기 키워드를 지원하지 않습니다. Div display : initial이 ie10 및 chrome 29에서 의도 한대로 작동하지 않습니다.
여기에 제안 된대로 공백으로 설정하려고했습니다. 표시 후 정상으로 되 돌리는 방법 : 테이블 행에 없음
이것은 효과가 있었고 내 시나리오에 충분했습니다. 물론 실제 초기 값을 설정하려면 위의 대답 만 내가 찾을 수있는 좋은 것입니다.
unset.