[javascript] CSS “: hover”를 활성화하는 순수 JavaScript에서 마우스 오버를 어떻게 시뮬레이션합니까?

배경

나는 주어진 페이지의 특정 요소 세트가 호버 이벤트에 대한 CSS에 의해 설정된 일부 CSS 속성 세트를 가지고 있는지 확인하기 위해 자동화 된 테스트를 작성하려고 시도하는 동안이 질문을 발견했습니다.

위의 답변이 완벽하게 설명하지만 JS에 의해 hover 이벤트를 트리거 한 다음 관심있는 일부 css 값을 조사하는 것이 불가능한 이유는 “CSS를 활성화하는 순수 JavaScript에서 마우스 오버를 어떻게 시뮬레이션합니까?”라는 초기 질문에 대답합니다. : hover”? ” 부분적으로 만.

부인 성명

이것은 성능이 뛰어난 솔루션이 아닙니다. 성능이 문제가되지 않는 자동화 된 테스트에만 사용합니다.

해결책

simulateCssEvent = function(type){
    var id = 'simulatedStyle';

    var generateEvent = function(selector){
        var style = "";
        for (var i in document.styleSheets) {
            var rules = document.styleSheets[i].cssRules;
            for (var r in rules) {
                if(rules[r].cssText && rules[r].selectorText){
                    if(rules[r].selectorText.indexOf(selector) > -1){
                        var regex = new RegExp(selector,"g")
                        var text = rules[r].cssText.replace(regex,"");
                        style += text+"\n";
                    }
                }
            }
        }
        $("head").append("<style id="+id+">"+style+"</style>");
    };

    var stopEvent = function(){
        $("#"+id).remove();
    };

    switch(type) {
        case "hover":
            return generateEvent(":hover");
        case "stop":
            return stopEvent();
    }
}

설명

generateEvent는 모든 css 파일을 읽고 : hover를 빈 문자열로 바꾸고 적용합니다. 모든 : hover 스타일이 적용되는 효과가 있습니다. 이제 시뮬레이션을 중지하여 Howered 스타일을 조사하고 초기 상태로 돌아갈 수 있습니다.

시트에서를 가져 와서 element.css (…)를 수행하여 관심있는 요소뿐만 아니라 전체 문서에 대해 호버 효과를 적용하는 이유는 무엇입니까?

이렇게하면 스타일이 인라인으로 적용되고 원래 CSS 호버 스타일에 의해 재정의되지 않을 수있는 다른 스타일이 재정의됩니다.

이제 단일 요소에 대한 호버링을 어떻게 시뮬레이션합니까?

이것은 성능이 좋지 않으므로하지 않는 것이 좋습니다. 필요한 경우 스타일이 요소에 적용되고 해당 스타일 만 사용하는지 element.is (selectorOfInterest)로 확인할 수 있습니다.

예

Jasmine에서 다음을 수행 할 수 있습니다.

describe("Simulate CSS Event", function() {
    it("Simulate Link Hover", function () {
      expect($("a").css("text-decoration")).toBe("none");
      simulateCssEvent('hover');
      expect($("a").css("text-decoration")).toBe("underline");
      simulateCssEvent('stop');
      expect($("a").css("text-decoration")).toBe("none");
    });
});