jQuery : 일시적으로 스타일을 변경 한 다음 원래 클래스로 재설정

jQuery : 일시적으로 스타일을 변경 한 다음 원래 클래스로 재설정

---

testThing이라는 클래스가 있다고 가정합니다.

.testThing
{
   background-color:#000000;
   float:left;
   height:50px;
   width:50px;
}

그리고 버튼 클릭으로 해당 클래스의 컨트롤에 대한 배경색 변경을 테스트 할 수 있기를 원합니다.

function setColor(someColor) 
{
   jQuery('.testThing').css('background-color', someColor);
}

하지만 사용자가 클래스의 내용에 따라 원래 색상 (다른 버튼 클릭)으로 재설정 할 수 있기를 바랍니다.

function resetClass()
{
   jQuery('#currentColor').removeClass('testThing');
   jQuery('#currentColor').addClass('testThing');
}

이것이 작동하는 것처럼 보이지만 (Albiet이이를 수행하는 가장 좋은 방법은 아닙니다) 컨트롤의 배경색이 해당 클래스에있는 원래 값으로 재설정되지 않습니다.

이제 추가 제거가 재설정되지 않는 이유를 알아 내거나 더 나은 방법을 찾아야합니다 ... 클래스를 제거하고 읽는 것이 어리석은 것처럼 보이지만 ...

---

Jquery는 CSS 파일에있는 것보다 우선 순위가 높은 스타일 속성에 CSS를 추가합니다. 해당 함수로 CSS 문서를 변경하지 않으므로 클래스를 추가, 제거 및 추가해도 전혀 수정되지 않았으므로 효과가 없습니다!

같은 기능을 사용해야하지만 이번에는 배경색을 검은 색으로 설정합니다.

function reset(this)
{
  $(this).css('background-color', '#000000');
}

또는 단순히 스타일 속성을 제거하십시오.

function reset(this)
{
  $(this).removeAttr('style');
}

---

이것이 오래되었다는 것을 알고 있지만 값을 빈 문자열로 설정하여 다음과 같이 사용자 정의 스타일을 제거 할 수 있습니다.

// set
$(this).css('background-color', '#000000');

// reset
$(this).css('background-color', '');

---

어때 toggleClass("testThing")? 변경할 속성이 둘 이상있을 때 사용합니다.

http://api.jquery.com/toggleClass/

---

변경하려는 스타일을 재정의하는 다른 클래스를 추가 한 다음 제거하는 것이 좋습니다. js 내부의 하드 코딩 스타일 정보를 능가합니다. 유일한 문제는 추가 된 클래스의 순서가 더 높은지 확인하여 요소가 기존 클래스가 아닌 스타일을 가져 오도록해야한다는 것입니다.

참조 URL : https://stackoverflow.com/questions/1053418/jquery-temporarily-change-a-style-then-reset-to-original-class