JavaScript를 사용하여 CSS 선언에 직접 액세스하고 수정할 수 있는 방법은 무엇입니까?

JavaScript를 사용하여 CSS 선언 액세스 및 수정

인라인 스타일 지정은 요소의 모양을 수정하는 간단한 접근 방식을 제공하지만 기존 CSS 규칙을 재정의할 수 있습니다. 의도한 행동을 방해합니다. 이를 방지하기 위해 개발자는 CSS 선언 개체를 직접 수정하도록 선택할 수 있습니다.

CSS 선언 개체는 문서 개체의 styleSheets 속성을 통해 액세스할 수 있습니다. 각 styleSheet 객체에는 cssRules(또는 Internet Explorer의 규칙) 컬렉션이 포함되어 있습니다. 이러한 규칙은 해당 스타일시트 내에 정의된 스타일을 나타냅니다.

CSS 선언 객체를 수정하려면 스타일시트의 cssRules 컬렉션에서 해당 규칙을 검색하고 해당 스타일 속성에 액세스합니다. 예:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

이 코드는 스타일시트의 첫 번째 규칙에 대한 색상 선언을 '빨간색'으로 수정합니다.

규칙의 스타일 속성을 수정하면 기존 스타일 속성이 재정의됩니다. 해당 규칙 내의 선언. 특정 속성을 선택적으로 수정하려면 다음 구문을 사용하세요.

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style['background-color'] = 'blue';</code>

이 코드는 첫 번째 규칙의 background-color 속성만 변경합니다.

이 기술을 시연하는 다음 JSFiddle은 방법을 보여줍니다. 호버 효과에 영향을 주지 않고 "box" 클래스를 사용하여 요소의 색상을 수정하려면: http://jsfiddle.net/8Mnsf/1/

위 내용은 JavaScript를 사용하여 CSS 선언에 직접 액세스하고 수정할 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!