정적 CSS 파일 없이 jQuery가 어떻게 CSS 규칙을 동적으로 생성하고 적용할 수 있습니까?

jQuery를 사용한 동적 CSS 규칙 생성

문제:

CSS 파일에는 CSS 규칙의 정적 정의가 필요한 경우가 많습니다. 정적 CSS 파일을 사용하지 않고 런타임에 재사용 가능한 CSS 규칙을 어떻게 동적으로 생성할 수 있습니까?

해결책:

jQuery를 사용하여

$("<style type="text/css"> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");

예:

정적 CSS 규칙 #my-window를 생성하려면 다음을 추가합니다. HTML의 head 요소에 이어 문서:

$("<style type="text/css"> #my-window { position:fixed; z-index:102; display:none; top:50%; left:50%; } </style>").appendTo("head");

사용:

이러한 방식으로 CSS 규칙을 정의한 후 addClass() 메서드를 사용하여 DOM 요소에 적용할 수 있습니다.

$("element-to-style").addClass("my-window");

이 방법을 사용하면 별도의 CSS 없이 재사용 가능한 CSS 규칙을 쉽게 생성하고 적용할 수 있습니다. 파일.

위 내용은 정적 CSS 파일 없이 jQuery가 어떻게 CSS 규칙을 동적으로 생성하고 적용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!