JavaScript가 CSS 스타일시트를 어떻게 동적으로 조작할 수 있습니까?

JavaScript로 CSS 스타일시트 조작

JavaScript는 개별 요소 스타일을 변경하는 것 외에도 CSS 스타일시트 자체를 수정하는 데까지 범위를 확장할 수 있습니다. 이 강력한 기능을 사용하면 개발자는 페이지를 다시 로드하거나 새 스타일 요소를 만들지 않고도 웹 페이지의 시각적 모양을 동적으로 조정할 수 있습니다.

insertRule() 메서드

insertRule () 메소드는 기존 스타일시트에 새 규칙을 삽입하는 게이트웨이를 제공합니다. CSS 규칙(문자열 형식)과 인덱스라는 두 가지 매개변수를 사용합니다. 규칙은 스타일시트 내의 지정된 인덱스에 삽입됩니다.

예:

const stylesheet = document.styleSheets[0];
stylesheet.insertRule('#myElement { color: red; }', 0);

deleteRule() 메서드

스타일시트에서 규칙을 제거하려면 deleteRule() 메서드를 활용하세요. 스타일시트 내에서 규칙의 위치를 ​​나타내는 단일 인덱스 매개변수를 허용합니다.

예:

const stylesheet = document.styleSheets[0];
stylesheet.deleteRule(0);

cssRules 속성을 통해 규칙에 액세스

스타일 시트의 cssRules 속성은 해당 스타일 시트에 대한 액세스 권한을 부여합니다. 개별 규칙. 각 규칙은 CSSRule 객체로 표시됩니다. 루프를 사용하여 규칙을 탐색하고 스타일, selectorText 및 선언과 같은 해당 속성을 수정할 수 있습니다.

예:

const stylesheet = document.styleSheets[0];
for (let i = 0; i < stylesheet.cssRules.length; i++) {
  const rule = stylesheet.cssRules[i];
  console.log(rule.selectorText);
  rule.style.color = 'blue';
  rule.style.backgroundColor = 'yellow';
  rule.style.fontSize = '20px';
}

이러한 기술을 활용하여 JavaScript CSS 스타일시트를 동적으로 조작하여 페이지 없이 맞춤형 사용자 경험과 실시간 조정을 가능하게 하여 웹 애플리케이션의 유연성과 응답성을 향상시킵니다. 새로고침합니다.

위 내용은 JavaScript가 CSS 스타일시트를 어떻게 동적으로 조작할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!