요소에 스타일을 동적으로 추가 및 제거하는 가장 좋은 방법

Question

일부 요소에서 mouseenter 및 mouseleave 이벤트를 사용하여 모양을 변경합니다. 가장 좋은 방법은 무엇

을 제거하기 위해 다음 $(this).removeClass('someClass')을

$(this).addClass('someClass') 추가 제거하고 다음 $(this).removeAttr('style')

1. $(this).css('someProperty','someValue') 추가하고 : 나는 다음과 같은 두 가지 전략 중 하나를 사용하여 그렇게 할 수 있어요 그렇게하려면?

Answer 1

확실한 옵션 2. 스타일은 스타일 시트에 정의되어야합니다.

또한 toggleClass이 있는데, 클래스가 있으면 제거하고 누락 된 경우 추가합니다.

---

참고 :toggleClass 또한 당신이 그렇게 추가하거나 (관계없이 현재 적용된 클래스가 있는지 여부의)을 제거할지 여부를 말하고, 두 번째 인수로 부울 전달할 수 있습니다 :

$(this).toggleClass('active', true); 

$(this).addClass('active'); 

이미 코드에서 부울을해야하는 경우에 매우 편리합니다 :

은 정확히 동일합니다. 그래서 대신의 :

if (isUserActive()) { 
    $(this).addClass('active'); 
} else { 
    $(this).addClass('active'); 
} 

당신은이 작업을 수행 할 수 있습니다 : 추가, 제거 및 최소화와 jQuery 속성의 전체 붕대를 변경할 수 있기 때문에

$(this).toggleClass('active', isUserActive()); 

Answer 2

내가 강하게 addClass()/removeClass()을 권 해드립니다 .

css() 방법은 attr() 방법과 style 속성을 제거하여 제거 할 것을 커플 링, 프로그램의 상호 작용을 전달하는 미적 변화 (들)을 반영하도록 변경되어야 하는지를 추적 할, 또는 오히려 스크립트를 필요로하는 반면 모두 스타일을 유지하려는 요소까지 포함하여 해당 속성을 재 할당해야합니다.

기본적으로 옵션 2는 효율적이고 옵션 1은 불필요한 작업을 만듭니다.

물론 언제나 toggleClass()이 있으며, 효율성을 더 높일 수 있습니다.

Answer 3

CSS 속성 값을 동적으로 생성해야하는 경우가 아니라면 스타일을 자바 스크립트에서 분리하는 것이 좋습니다. 따라서 직접 CSS 스타일 대신 클래스를 사용하십시오.

Answer 4

.addClass 및 .removeClass은 CSS로 변경 내용을 스타일링 할 수 있기 때문에 가장 좋은 방법입니다. 잠시 후에 사이트를 쉽게 다시 디자인 할 수 있습니다.

Answer 5

옵션 2 JavaScript로해야하지만 현대적인 브라우저의 경우 의사 클래스 인 :hover을 사용하여 CSS로 전적으로 달성 할 수 있습니다.

Answer 6

일반적으로 스타일은 다른 요소에 공통적이기 때문에 두 번째 것이 가장 좋습니다. 일반적으로 속성을 추가하는 것과 비교하여 제본을 추가하는 것이 좋습니다.

$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove 

Answer 7

두 개 이상의 요소에서이 함수를 호출하는 경우 두 번째 요소를 사용하는 것이 좋습니다. 나중에 모양을 다시 변경해야하는 경우 모든 요소가 아닌 CSS 클래스 내에서만 수정해야합니다.