다음과 같은 스타일 설정 : 호버 javascript

Question

다음 방법은 브라우저 호환성으로 인해 CSS 스타일을 설정하는 데 유용하다는 것을 알고 있습니다. 내가 할 수없는 것을

element.style.cssText = "color:red;"; 

는 :hover 및 :focus CSS 이벤트에 스타일을 적용 할 cssText를 사용합니다.
대신 어떻게해야합니까?

element.style.cssText = ":focus{color:red;}"; 

P. (. 그것은 내 상황에 적합하지 않음) 등의 대신 CSS :hover의 onmouseover 같은 자바 스크립트 이벤트를 사용하여 언급하지 마십시오

Answer 1

을 일부 부두 마법을 수행 할 수 있습니다 당신이 필요하지 정확하게

var head = document.getElementsByTagName('head')[0]; 
var style = document.createElement('style'); 
var declarations = document.createTextNode('selector:pseudo { property: value }'); 

style.type = 'text/css'; 

if (style.styleSheet) { 
    style.styleSheet.cssText = declarations.nodeValue; 
} else { 
    style.appendChild(declarations); 
} 

head.appendChild(style); 

을 , 그러나 당신이 원한다면 당신은 그것을 비틀고 그것에서 멋진 기능을 만들 수 있습니다.

Answer 2

새 스타일 요소를 만드는 대신 항상 기존 스타일 시트에 개별 스타일 규칙을 추가 할 수 있습니다. 의 라인을 따라 뭔가 :로 의사 선택기를 가져하지만 그냥 간단하게 수 :

function addStyle() { 
    var style = document.styleSheets[0];  //select style sheet (0==first) 
    var styleSel = ".class:hover";    //define selector 
    var styleDec = "color: red;";    //define declaration 

    if(style.insertRule) {  //for modern, DOM-compliant browsers 

     style.insertRule(styleSel+'{'+styleDec+'}', style.cssRules.length); 
     //I chose to do it this way to more easily support the addRule method, but 
     //know that insertRule only needs two parameters, full style rule 
     //(selector+prop/value declarations), and index to insert rule at 
     //     styleSheets[0].insertRule(rule, index); 

    }else {      //for IE < 9 
     style.addRule(styleSel, styleDec, -1); 
    } 
} 

나는이 당신이를 추가하는 클래스 (즉, 이미 정의 및 적용)를 사용하는 가정 example at MDN
적응 ID 또는 요소 선택자가 될 수 있습니다.

클래스 또는 스타일 규칙을 미리 추가 할 수없는 경우 (클래스 정의, 호버 정의, 원하는 요소에 클래스 적용) 거의 동일한 방식으로 동적으로 수행 할 수 있습니다.