JavaScript에서 DOM으로 만든 요소에 CSS : "hover"를 설정하려면 어떻게해야합니까?

Question

DOM을 사용하여 실행중인 AJAX 함수에서 JSON 응답을 관리하고 있습니다. 필자가 작성한 스크립트는 완전히 이식이 가능해야하므로 작성한 요소의 스타일을 즉석에서 정의하고 있습니다 (의미는 외부 CSS에 연결하지 않고 HTML 문서 자체에 CSS를 제공하지 않기 때문입니다. 문서 관리 권한이 있음).

몇 가지 요소에 호버 효과를 적용하고 싶습니다.

예 :

 #myDiv:hover { background:#000000; }

는 DOM에 그것을 정의하는 방법이 있나요? 또는 mouseover을 사용해야합니까?

Answer 1

동적으로 스타일 시트를 만들고 조작 할 수 있습니다. 이 접근법에서 브라우저 간 크로스로 문제가있는 경우는 See here입니다.

일부 랩퍼 함수 lying around이 있습니다. 를 사용하여 코드는 미리 정의 된 클래스 요소를 만들 수 있습니다

document.createStyleSheet().addRule('#myDiv:hover', 'background:#000000;'); 

Answer 2

을 읽을 것입니다 :

나를 위해

.h:hover{color: #c00} 

var elem = document.createElement('div'); 
elem.className = 'h'