CSS에 JavaScript 기능을 어떻게 포함할 수 있나요?

CSS에 JavaScript 삽입

CSS 내에서 JavaScript를 직접 실행할 수는 없지만 유사한 기능을 허용하는 창의적인 기술이 있습니다.

IE: 표현기법과 HTC 동작

Internet Explorer는 두 가지 방법을 제공합니다.

• 표현 기법: JavaScript 표현식을 평가하는 표현식을 생성합니다. 예:

body {
  color: (function() { return document.getElementById("button").style.color; })();
}

• HTC 동작: CSS를 통해 로드된 별도의 XML 파일(script.htc)을 활용합니다. HTC 파일 내에서는 JavaScript를 실행할 수 있습니다.

body {
  behavior:url(script.htc);
}

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>

<SCRIPT>
  function main() {
    alert("HTC script executed.");
  }
</SCRIPT>

Firefox: XBL

Firefox는 다음과 같은 유사한 XML 기반 솔루션을 제공합니다. XBL.

body {
  -moz-binding: url(script.xml#mycode);
}

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

  <binding>

중요 고려 사항

• JavaScript는 CSS 선택기가 문서의 요소와 일치하는 경우에만 실행됩니다.
• 이러한 기술은 표준화되어 있지 않으며 전혀 작동하지 않을 수 있습니다.
• 보안에 영향을 미칠 수 있으므로 주의해서 사용하세요.

위 내용은 CSS에 JavaScript 기능을 어떻게 포함할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!