어떻게 사용합니까? Javascript로 속성을 설정하는 경우 초점을 맞 춥니 다.

Question

< > 요소를 자바 스크립트로 지정하는 경우이 방법으로 설정 한 모든 속성이 포커스 규칙에서 무시됩니다.

I했습니다이 보여주는 example :

초기 입력 요소의 배경과 경계가 [개방]에

클릭 주변 소자 (div.header)와 동일한 설정

• 링크는 처음에는 표시되지 않았던 div.body 요소를 엽니 다.
• 제목이 텍스트 필드임을 분명히 밝히고, 입력 한 배경과 테두리를 방금 공개 된 텍스트 영역과 일치하도록 변경하십시오.

텍스트 영역에 포커스가있는 것은 분명하므로 배경색을 노란색으로 지정하려면 텍스트 영역과 입력에 모두 초점 규칙이 있습니다.

그러나 입력 요소에서는이 속성이 프로그래밍 방식으로 설정 되었기 때문에 작동하지 않습니다. 설정하지 않으면 포커스가 예상대로 작동합니다. the : focus 규칙이 .css()에도 설정되지 않은 속성을 설정하면 해당 규칙이 적용됩니다.

사파리, 파이어 폭스, 크롬 및 IE에서 마찬가지입니다. 따라서 "예상되는 동작"이 분명합니다. 그러나 온라인이 아닙니다. 이유는 무엇입니까?

분명히 내가 원하는 것을 구현할 수 있지만, 이것이 왜 그런지 이해하려고 노력하고 있습니다.

Answer 1

이 특이성과 관련이있다

및 it is documented 구체적

특이성 네 가지 구성 요소를 가지고; 그것들을 a, b, c, d라고 부르 자. 구성 요소 "a"는 가장 구별력이 있고 "d"는 가장 적습니다.

• 구성 요소 "a"는 매우 간단합니다 : 그것은 스타일 속성에서 선언 한이다, 그렇지 않으면 .css는 style 직접 속성을 업데이트하기 때문에 0

, 그것은 무엇보다 높은 특이성을 가지고 있어요 귀하의 스타일 시트에. !important go more greater (특이성보다 우선 순위가 높음)을 사용할 수도 있지만 더 나은 방법은 스타일 속성을 직접 변경하는 대신 클래스 (.addClass)를 사용하는 것입니다.

Answer 2

요소의 스타일을 직접 설정하면 HTML style속성을 사용하는 것과 같습니다. 어떤 선택기든지 the cascade에옵니다.

일반적으로 JavaScript를 사용하여 CSS 변경 사항을 적절하게 처리하려면 미리 스타일 시트를 적절한 스타일 시트로 준비한 다음 요소를 변경하여 새로운 선택기와 일치하도록 (종종 클래스 목록을 수정하여)합니다.

the stylesheet itself with JavaScript을 수정할 수도 있습니다. W3C 의해