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

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

디스플레이 속성을 기본값으로 재정의할 수 있습니까?예를 들어 한 스타일에서 이 값을 없음으로 설정한 경우 기본값으로 다른 스타일에서 이 값을 재정의하려고 합니다.

아니면 그 요소의 기본값이 무엇인지 알아내서 그 요소로 설정하는 방법밖에 없습니까?요소가 일반적으로 블록인지, 인라인인지, 아니면...

브라우저의 기본 스타일은 사용자 에이전트 스타일시트에 정의되어 있으며, 원본은 여기에서 찾을 수 있습니다.안타깝게도 계단식 및 상속 수준 3 규격에서는 스타일 속성을 브라우저 기본값으로 재설정하는 방법을 제안하지 않는 것 같습니다.그러나 계단식 및 상속 레벨 4에서 이에 대한 키워드를 다시 도입할 계획이 있습니다. 작업 그룹은 아직 이 키워드의 이름을 결정하지 않았습니다(링크에 따르면 현재).revert최종적인 것은 아닙니다.『 』 『 』 『 』의 지원에 revert는 caniuse.com 에서 확인할 수 있습니다.

레벨 3 사양은 키워드를 도입하지만 속성을 초기 값으로 설정하면 브라우저에 의해 정의된 것이 아니라 CSS에 의해 정의된 기본값으로 재설정됩니다.의 초기 값display이라inline이것은 여기에 명시되어 있습니다.initial키워드는 브라우저 기본값이 아닌 해당 값을 나타냅니다.사양 자체는 속성 아래에 다음과 같은 내용을 기록합니다.

들어 가 예를들, 작가지경을 한 경우all: initial요소에서 규칙이 캐스케이드의 작성자, 사용자 또는 사용자-에이전트 수준에 나타나지 않는 것처럼 모든 상속을 차단하고 모든 속성을 재설정합니다.

이것은 외부 페이지의 스타일을 상속하지 않으려는 페이지에 포함된 "위젯"의 루트 요소에 유용할 수 있습니다.요소에 "기본" 스타일)은 과 같습니다.display: block에서 UA와 합니다.<div> 버릴 또한 날아가 버릴 것입니다.

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

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

은 (위의대안다같다니습과음은다같니▁(위습▁(▁be다과)일 것입니다.div.foo:not(.bar) { display: inline-block; }재지정보다는 원래 선택기를 수정해야 합니다.)

Javascript 사용이 허용되는 경우 다음을 설정할 수 있습니다.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로 설정된 스타일은 무시됩니다.

설정 해제display:

값을 사용할 수 있습니다.unsetFirefox와 Chrome 모두에서 작동합니다.

display: unset;

---

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

아니요, 일반적으로 불가능합니다.일부 CSS(또는 HTML) 코드가 요소의 속성 값을 설정하면 이 값을 취소하고 브라우저에 기본값을 사용하도록 지시할 수 없습니다.

물론 속성을 기본값으로 예상되는 값으로 설정할 수 있습니다.HTML5 CR의 Rendering 섹션을 선택하면 브라우저가 실제로 수행하는 작업을 대부분 반영하여 광범위하게 작동할 수 있습니다.

그래도 브라우저는 기본값을 원하는 대로 가질 수 있기 때문에 대답은 "아니오"입니다.기본값으로 재설정하려는 이유가 무엇인지 분석해야 합니다. 원래 문제는 여전히 해결 가능할 수 있습니다.

제게 효과가 있었던 것은!

revert는 속성이 상위에서 상속되는 경우 또는 사용자 에이전트의 스타일시트에서 설정된 기본값으로 속성을 상속된 값으로 재설정합니다.

JavaScript에 액세스할 수 있는 경우 요소를 만들고 해당 요소의 계산 스타일을 읽을 수 있습니다.

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을 사용할 때 이니셜 키워드에 문제가 있었습니다.크롬에서는 잘 작동하지만 IE에서는 효과가 없는 것 같습니다.

이 답변에 따르면 IE는 초기 키워드를 지원하지 않습니다.Div 디스플레이: ie10 및 chrome 29에서 초기가 의도한 대로 작동하지 않음

여기서 제안하는 것처럼 대신 공백으로 설정하려고 했습니다: 표시 후 정상으로 되돌리는 방법: 테이블 행에는 없음

이것은 효과가 있었고 제 시나리오에 충분했습니다.물론 실제 초기 값을 설정하려면 위의 답변이 제가 찾을 수 있는 유일한 좋은 답변입니다.

예를 들어, 당신의 질문에 대한 제가 이해한 바에 따르면: 당신은 스타일 시트의 시작 부분에 스타일이 있었습니다.(ex. background-color: red)그런 다음 자바 스크립트를 사용하여 다른 스타일로 변경했습니다.(ex. background-color: green)이제 스타일 시트에서 스타일을 원래 값으로 재설정하려고 합니다.(background-color: red)도 않고 도 못한 채로 입니다.(ex. element.style.backgroundColor = 'red')...!

제 말이 맞다면 요소에 다른 클래스 이름을 사용하는 좋은 솔루션이 있습니다.

단계:

1. 원하는 대로 스타일시트의 기본 스타일을 설정합니다.
2. 스타일시트에서 새 클래스 이름을 정의하고 원하는 새 스타일을 추가합니다.
3. 스타일 간에 트리거하려면 요소에 새 클래스 이름을 추가하거나 요소를 제거합니다.

새 스타일을 편집하거나 설정하려면 새 클래스 이름으로 요소를 가져오고 원하는 대로 스타일을 편집합니다.

이것이 도움이 되길 바랍니다.잘 부탁드립니다!

언급URL : https://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value