자바스크립트를 CSS에 통합할 수 있나요?

CSS의 Javascript: 가능성 탐구

CSS와 Javascript의 영역은 일반적으로 별도로 작동하지만 특정 영역에서 격차를 해소하는 것이 가능합니다. 웹 브라우저. 다음은 IE와 Firefox를 통해 CSS 내에 Javascript 기능을 통합하는 방법에 대한 자세한 내용입니다.

HTC 동작(IE):

HTC 동작을 사용하면 다음을 포함할 수 있습니다. CSS에서 XML 파일로 스크립트를 작성합니다. body {behavior:url(script.htc);}와 같은 CSS 규칙을 정의하면 외부 XML 파일을 HTML 본문에 로드할 수 있습니다. XML 파일 내에서 구성 요소를 정의하고 ondocumentready와 같은 이벤트 핸들러를 지정하여 Javascript 코드를 트리거할 수 있습니다.

예:

script.htc:

<PUBLIC:COMPONENT TAGNAME="xss">
   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>
</PUBLIC:COMPONENT>
<SCRIPT>
   function main() 
   {
     alert("HTC script executed.");
   }
</SCRIPT>

XBL (Firefox):

Firefox는 XBL(Extensible Binding Language)을 활용하여 스크립트를 CSS에 통합합니다. body {-moz-bind: url(script.xml#mycode);}와 같은 CSS 규칙을 사용하면 XML 파일을 CSS 선택기에 바인딩할 수 있습니다. XML 파일 내에서 원하는 Javascript 코드가 포함된 구현으로 바인딩을 정의합니다. 실행합니다.

예:

script.xml:

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

<binding>

제한 사항:

두 기술 모두에서 Javascript가 코드는 CSS 선택기가 페이지의 요소와 일치하는 경우에만 실행됩니다. 예를 들어 위의 기술을 body 요소에 적용하면 페이지가 로드되자마자 코드가 실행됩니다.

위 내용은 자바스크립트를 CSS에 통합할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!